Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

Bootstrap时间选择器是前端开发中常用的一种组件，用于方便用户在网页上选取日期和时间。在Bootstrap框架中，有两个常见的插件用于实现这一功能：datetimepicker和daterangepicker。 1. **datetimepicker**： 这个插件是Bootstrap的官方插件，主要用于单个日期和时间的选择。使用datetimepicker，你需要引入以下文件： - `bootstrap-datetimepicker.min.css`：样式文件，定义了时间选择器的样式。 - `bootstrap-datetimepicker.min.js`：JavaScript核心文件，提供了时间选择器的功能。 - `bootstrap-datetimepicker.zh-CN.js`：中文语言包，使插件支持中文显示。 - `moment.min.js`：依赖的Moment.js库，用于处理日期和时间的格式化。 使用datetimepicker的基本HTML结构如下： ```html <div class="input-group date" id="datetimepicker"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> ``` 初始化datetimepicker的JavaScript代码： ```javascript $('#datetimepicker').datetimepicker({ format: 'YYYY-MM-DD HH:mm:ss', locale: 'zh-cn' }); ``` 你可以通过API设置和获取日期，如`startDate`、`endDate`等，并可以自定义日期和时间的格式。 2. **daterangepicker**： daterangepicker是一个第三方插件，相较于datetimepicker，它的主要特点是能够选择日期范围，而非单一的日期和时间。需要的文件包括： - `daterangepicker.css`：样式文件。 - `daterangepicker.js`：JavaScript核心文件。 - `moment.min.js`：同样依赖于Moment.js库。 使用daterangepicker的基本HTML结构： ```html <div id="reportrange" class="pull-left dateRange"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> ``` 初始化daterangepicker的JavaScript代码： ```javascript $('#reportrange').daterangepicker({ startDate: moment().subtract('days', 30), endDate: moment(), minDate: '01/01/2012', maxDate: moment(), dateLimit: { days: 30 }, showDropdowns: true, showWeekNumbers: false, timePicker: false, timePickerIncrement: 60, timePicker12Hour: false, ranges: { '最近30天': [moment().subtract('days', 30), moment()], // 其他范围... } }, function(start, end, label) { // 回调函数，当日期范围改变时触发 }); ``` daterangepicker提供了丰富的配置选项，如`ranges`允许预设日期范围，`startDate`和`endDate`用于指定默认的日期范围，`dateLimit`限制可选的最大日期范围等。 总结来说，datetimepicker适合需要单个日期或时间选择的场景，而daterangepicker则适用于需要选取日期范围的场合。两者都依赖于Moment.js库，提供灵活的配置和丰富的功能，可以满足大多数Web应用的日期和时间选择需求。在实际使用中，根据项目需求选择合适的插件，结合其API和配置选项，可以轻松实现用户友好的时间选择功能。