Bootstrap3 datetimepicker控件的使用
Bootstrap3 日期+时间选择控件
1.支持日期选择,格式设定
2.支持时间选择
3.支持时间段选择控制
4.支持中文
官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/
moment语言包:https://github.com/moment/moment
moment时间格式化使用说明:http://momentjs.com/docs/
使用方法,引用的文件:
- <script src="Js/jquery-1.11.3.min.js"></script>
- <link href="Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
- <script src="Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
- <link href="Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
- <script src="Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
- <script src="Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
实例1:
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>选择日期:</label>
<!--date标记-->
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<label>选择日期+时间:</label>
<!--date标记-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn')
});
});
Bootstrap3 datetimepicker控件的使用的更多相关文章
- 在asp.net mvc4项目里bootstrap datetimepicker控件的使用
前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...
- DateTimePicker 控件的格式设置
DateTimePicker 控件的格式设置 CustomFormat属性设置 : yyyy-MM-dd HH:mm:ss 月大写M,分钟小写m,小时H代表24小时计算,h代表12小时计算yyyy- ...
- winform中的dateTimePicker控件设置默认值为空
winform中的dateTimePicker控件设置默认值为空 第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键
- 【分享】自己写的一个可空的DateTimePicker控件-附源码
最近这段时间在重构以前的一个项目,其中有一项就是要把DateTimePicker控件值可空.大家都知道的DateTimePicker值为DateTime类型,DateTime类型值不能等于Null.但 ...
- Delphi - DateTimePicker控件日期格式
设置成显示年.月.日.时.分.秒 1:将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm:ss',注意日期里月份对应的MM是大写,时间里的分钟对应的 ...
- delphi中DateTimePicker控件同时输入日期和时间
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...
- C# DateTimePicker控件如何精确设置显示时分秒
项目中需要使用DateTimePicker空间选定当前的时间,但是这个空间默认显示到天,如何能让它显示具体的小时和分钟呢? 我们看到有一个Format属性,Format令我们想到格式化,有这几种格式 ...
- DateTimePicker 控件置空
dtOrderDateFrom.Format = DateTimePickerFormat.Custom; dtOrderDateFrom.CustomFormat = " "; ...
- C#DateTimePicker控件问题
DateTimPicker控件在遇到29这样特殊的日期,选择时可能会出现 解决方案:在属性中把Value值设置为除29日外的其他日期或者在代码中直接设置Value值:DateTimePicker1 = ...
随机推荐
- 1.2 PCI总线的信号定义
PCI总线是一条共享总线,在一条PCI总线上可以挂接多个PCI设备.这些PCI设备通过一系列信号与PCI总线相连,这些信号由地址/数据信号.控制信号.仲裁信号.中断信号等多种信号组成. PCI总线是一 ...
- mongodb一些使用技巧或注意事项记录
1.有的时候需要删除指定字段那一列,使用update操作.例如要删除name这一列: query json: {"name":{$exists:true}} update jso ...
- Unhandled event loop exception No more handles
1.错误描述 2.错误原因 3.解决办法
- List、Map和Set的实现类
List.Map和Set的实现类 1.List实现类 (1)ArrayList (2)Vector 2.Map实现类 (1)HashMap (2)Hashtable 3.Set实现类 (1)HashS ...
- Radar Installation POJ - 1328
Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...
- controller层中,参数的获取方式以及作用域的问题
package com.krry.web; import javax.servlet.http.HttpServletRequest; import org.springframework.stere ...
- 【POJ 3401】Asteroids
题面 Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x ...
- javascript使用闭包模拟私有属性和方法
最近因为做了一个项目,其中涉及到了js私有方法,这个概念在其语言里面是很常见的,很多语言都有private这个关键字,只要在一个类的前面加上private就表示申明了一个私有方法,但是javascri ...
- 关于jstl的使用
1.jsp中el表达式无法被解析 使用jstl标签的时候,发现el表达式无法被解析,后来查阅资料发现jsp中需要添加<%@page isELIgnored="false" % ...
- 如何使用Vue
我在学习前端框架的时候面临了很多的选择,比较流行的有react,angularJS,还有另外一个就是Vue,Vue相对于另外两个出现时间更晚,也更符合响应式(Reactive)组件化(Composab ...