bootstrap-datetimepicker 日期选择控件 通用版
2017-07-17 17:29
567 查看
开门见山,直接干脆
先贴图!
如图,有三种功能,按需复制代码就好。
我用 年月日 的功能 来举例子好了
请无视 ng-XXXX部分。 这是我结合angularJS做得项目,你们大可直接删了。
只要引入对应的 JS 和CSS文件,复制黏贴上述代码,就可以直接使用了。
这是我上传的 代码,对应的 bootStrap2 和3 的版本,随便用吧。。。。css和js文件都在里面了。 路径记得修改成对应自己的路径。
先贴图!
如图,有三种功能,按需复制代码就好。
我用 年月日 的功能 来举例子好了
<div class="controls input-append date form_date" data-date="" data-date-format="yyyy-MM-dd " data-link-field="dtp_input1" data-link-format="yyyy-mm-dd"> <input size="16" placeholder="开始时间" type="text" ng-model="startDate" height="10px" readonly="true" /> <span class="add-on"><i class="icon-remove" ng-click="clearDate()"></i></span> <span class="add-on"><i class="icon-th"></i></span> </div> <div class="controls input-append date form_date" data-date="" data-date-format="yyyy-MM-dd " data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input size="16" placeholder="结束时间" type="text" ng-model="endDate" readonly="true" /> <span class="add-on"><i class="icon-remove" ng-click="clearDate()"></i></span> <span class="add-on"><i class="icon-th"></i></span> </div>
请无视 ng-XXXX部分。 这是我结合angularJS做得项目,你们大可直接删了。
只要引入对应的 JS 和CSS文件,复制黏贴上述代码,就可以直接使用了。
需要引入的JS有
http://download.csdn.net/detail/qq_30073735/9901493这是我上传的 代码,对应的 bootStrap2 和3 的版本,随便用吧。。。。css和js文件都在里面了。 路径记得修改成对应自己的路径。
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/> <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script> <script type="text/javascript"> $('.form_datetime').datetimepicker({ //language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); $('.form_date').datetimepicker({ language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); $('.form_time').datetimepicker({ language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0 }); </script>
相关文章推荐
- 日期选择控件bootstrap-datetimepicker demo
- Bootstrap3 日期+时间选择控件 datetimepicker的使用方法说明
- bootstrap datetimepicker 日期控件清空问题
- 关于Bootstrap日期控件datetimepicker被模态框等遮罩在底部的问题及解决办法。
- bootstrap-datetimepicker 日期控件
- Silverlight DateTimePicker 自定义的日期及时间选择控件
- bootstrap datetimepicker时间日期控件
- 时间日期选择控件DateTimePicker
- bootstrap中日期插件 datetimepicker 只选择年份
- Bootstrap datetimepicker “dp.change” 时间/日期 选择事件
- Bootstrap的日期选择插件DateTime Picker增强版
- Bootstrap的日期选择插件DateTime Picker
- 此项目是bootstrap-datetimepicker 项目 的一个分支,原项目不支持 Time 选择。 其它部分也进行了改进、增强,例如load 过程增加了对 ISO-8601 日期格式的支持。
- bootstrap-datetimepicker 选择日期
- bootstrap-datetimepicker bootstrap选择日期
- bootstrap datetimepicker日期控件的使用
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
- daterangepicker日期选择控件
- bootstrap datetimepicker日期表单