最近因为要做平台的移植,不能使用之前封装的时间插件。但可以用开源的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是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...
bootstrap_datetimepicker插件
Bootstrap-Datetimepicker.js是一款基于Bootstrap框架的日期时间选择器插件,它为用户提供了便捷的方式来选取日期和时间,尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致,确保了与Bootstrap...
Bootstrap DateTimePicker插件提供了丰富的定制选项,包括但不限于: 1. **语言支持**:可以轻松地切换到不同的语言环境,适应多语种网站的需求。 2. **格式化日期和时间**:用户可以选择日期和时间的显示格式,如...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期和时间选择插件,它使得在Web应用中添加日期和时间选择功能变得简单易行。这个插件利用了jQuery的便利性和Bootstrap的优美设计,提供了用户友好的交互体验。...
在“Bootstrap-datetimepicker年月日时分秒均可选择”这一主题中,我们关注的是如何配置和使用这个插件,以便用户可以选择完整的日期(年、月、日)以及时间(小时、分钟和秒)。要实现这一功能,你需要对JavaScript...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间和日期选择插件,它为用户提供了直观、易用的界面来选择日期和时间。这款插件极大地简化了在Web应用中集成日期和时间选择器的过程,使得开发者能够快速地添加...
在上面的代码中,我们首先引入了必要的CSS和JS库,然后创建了一个输入框并为其添加了datetimepicker插件。在JavaScript部分,我们使用`clearBtn: true`配置项启用了清除按钮,并设置了中文环境(locale: 'zh-cn')。...
Bootstrap DateTimePicker是一款流行的JavaScript插件,它为Bootstrap框架提供了日期和时间选择功能。在实际的Web开发中,我们经常需要用户输入精确到秒的时间信息,这时就需要对DateTimePicker进行配置,使其支持秒...
二、Bootstrap-Datetimepicker插件介绍 Bootstrap-Datetimepicker是与Bootstrap框架兼容的日期和时间选择器,由Eonasdan开发。它提供了一种直观的用户界面,允许用户选择日期和时间,同时支持多种语言和自定义格式化...
Bootstrap-Datetimepicker插件则是在这个基础上,为日期和时间的选择提供了便利。它允许用户通过一个交互式的日历和时钟界面来选择日期和时间,支持多种格式的日期时间显示,还可以自定义样式,以适应不同的网页设计...
2. JS文件:JavaScript文件负责实现datetimepicker的功能,主要包括`jquery.js`(jQuery库)、`bootstrap.js`(Bootstrap的JavaScript组件)以及`bootstrap-datetimepicker.js`(datetimepicker插件自身)。...
_bootstrap 日期插件 datetimepicker 的使用_ Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的前端框架,用于快速开发响应式界面和移动设备优先的 Web 应用程序。其中,datetimepicker 是一个非常实用的插件,...
在本示例中,我们学习了如何在 Angular 项目中使用 Bootstrap-Datetimepicker 时间插件,并了解了其使用示例。通过这个示例,我们可以更好地掌握 Bootstrap-Datetimepicker 插件的使用和配置,提高自己的开发技能。 ...
最后,我们需要在页面加载完成后初始化datetimepicker插件,设置必要的选项。这里我们以ID为`datetimepicker1`的输入框为例: ```javascript $(function () { $('#datetimepicker1').datetimepicker({ format: '...
**时间选择器bootstrap-datetimepicker**是一款基于Bootstrap框架和jQuery库的日期与时间选择插件。这个组件提供了用户友好的界面,使得在网页上输入日期和时间变得简单易行。在网页开发中,时间选择器是必不可少的...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的日历时间选择插件,它为用户提供了便捷的方式来选取日期和时间,大大提升了网页表单的用户体验。这个插件利用了Bootstrap的样式和JavaScript组件,使得日期时间的...