最近因为要做平台的移植,不能使用之前封装的时间插件。但可以用开源的bootstrap,为了方便自己以后万一还有时间控件的需求,特此记录一下吧。虽然可能大家觉得简单,但是我着实费了一番功夫,话不多少,begin!
做时间控件可以使用bootstrap的datetimepicker插件(如果只需要日期的话直接用datepicker,如果是需要起始、结束日期的范围用daterangepicker就OK),该插件是基于纯js驱动的,跟highcharts类似的原理。
首先,必要的一些css和js必须引入:
bootstrap.min.css:bootstrap的基本样式
bootstrap-datetimepicker.min.css:datetimepicker插件的样式
jquery-1.x.x.min.js:jquery,必须引入,可能不同的bootstrap需要的jquery版本不同
bootstrap.min.js:bootstrap的必要的js
bootstrap-datetimepicker.js:datetimepicker插件必须的js文件
bootstrap-datetimepicker.zh-CN.js:所支持的语言版本插件(一般在bootstrap的local目录下,这里把它单独抽出来~)
好了,我们在开始前,必须要注意:fonts(不能随意改名)目录是必须的,用来存放datetimepicker插件的一些小图片,且必须跟页面所在的目录同级。否则会出现插件的前后箭头等无法显示,如:
页面具体写法如下:(仅供参考)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="../css/bootstrap.min.css" /> <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="../js/bootstrap.min.js" ></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script type="text/javascript"> $(function() { $('.col-md-5').datetimepicker({ language: 'zh-CN', format:'yyyy-mm-dd HH:mm',//选择完日期后,input框里的时间值的格式 startDate:new Date(),//开始日期时间,在此之前的都不可选,同理也有endDate weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); }); </script> </head> <body> <div class="form-group"> <label for="dtp_input2" class="col-md-2 control-label">时间选择</label> <div class="input-group date form_date col-md-5" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="padding-right:500"> <input class="form-control" size="16" type="text" value="" readonly style="width:150px"> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /><br/> </div> </body> </html>
注意:
$(function(...))里的选择器不能使用id选择器,最好使用class选择器。(因为你在同一个页面中可能不止需要一次时间控件,所以不能写死一个id);
dateformat属性决定了你input框中的值的格式。
如果你想显示中文,那么必须引入bootstrap-datetimepicker.zh-CN.js,同时language: 'zh-CN'属性也必须指定,才能显示中文。
format属性里面的格式字符串必须要用引号围起来,否则会报yyyy未定义的错误,小细节同样很重要。
选择比较【靠谱儿】的bootstrap版本也很重要,我就因为在这上面选择了不太靠谱的js版本,导致无法如愿加载出时间控件。
效果:
相关推荐
bootstrap-datetimepicker-master.zip里面有日期插件js
bootstrap_datetimepicker插件
bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...
bootstrap-datetimepicker日历扩展插件
基于bootstrap-datetimepicker的日期选择中文汉化,同时可以获取选择到的日期 使用说明可见博客: https://blog.csdn.net/qq_41986312/article/details/83750975
bootstrap-datetimepicker显示农历节假日、万年历信息扩展插件
bootstrap日期插件datetimepicker的使用
bootstrap-datetimepicker 时间选取控件,bootstorp插件
前端项目-angular-js-bootstrap-datetimepicker,日期时间选取器AngularJS引导插件
没用过bootstrap2,所以之间的差异不清楚,但是看往上基本上都是说bootstrap2与bootstrap-datetimepicker的使用,之间会有不同,所以写下记录,如有不对之处,还请指正! 网上下载bootstrap-datetimepicker-master....
使用JS开发的日期和时间选择插件DateTimePicker,通过框架式使用,可应用部署到不同的项目中,修改代码实现多种多样的样式可供选择。 jquery.datetimepicker.css jquery.datetimepicker.js jquery.js index.html使用...
bootstrap-datetimepicker.rar,bootstrap时间控件,内含一个小例子,简单粗暴,欢迎下载
主要介绍了Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery日期插件,能够选择日期和时间,可以只选择日期,也可以只选择时间,一种是用普通的HTML页面完成,一种是使用ASP.NET完成,压缩包中包括所用到的JS和CSS文件
bootstrap-datetimepicker开始时间小于等于结束时间-相互约束-清除时间; JQuery的datetimepicker插件,限制开始时间小于等于结束时间
bootstrap-datetimepicker是一款轻便的时间选择插件,支持Time选择,国际化,应用起来相当简单。而uploadify则是一款支持多文件上传的插件。最近应用这两个插件做了些小应用,感觉不错,简单做个总结。 1.引入插件...
主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧