日期时间范围选择插件:daterangepicker使用总结(必看篇)

daterangepicker插件使用总结 daterangepicker是一款功能强大且灵活的日期时间范围选择插件，它可以帮助开发者快速实现日期时间选择、日期范围选择等功能。本文将详细介绍daterangepicker插件的使用方法，并提供相关的代码示例。 一、日期时间选择实现 daterangepicker插件提供了多种日期时间选择方式，包括日期选择、时间选择、日期时间选择等。下面是一个基本的日期时间选择示例： HTML代码： ``` <div class="box"> <label for="datePicker">双日历</label> <input type="text" name="datePicker" class="datePicker" id="datePicker"> </div> ``` JS代码： ``` $('input[name="datePicker"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); ``` 二、日期范围选择实现 daterangepicker插件也提供了日期范围选择的功能，可以实现从某个日期到某个日期的选择。下面是一个基本的日期范围选择示例： HTML代码： ``` <div class="box"> <label for="from">从</label> <input type="text" name="from" class="from" id="from"> <label for="to">到</label> <input type="text" name="to" class="to" id="to"> </div> ``` JS代码： ``` $('input[name="from"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); $('input[name="to"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); ``` 三、使用两个单日历实现范围选择 daterangepicker插件也提供了使用两个单日历实现范围选择的功能。下面是一个基本的使用两个单日历实现范围选择的示例： HTML代码： ``` <div class="box"> <label for="from">从</label> <input type="text" name="from" class="from" id="from"> <label for="to">到</label> <input type="text" name="to" class="to" id="to"> </div> ``` JS代码： ``` $('input[name="from"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); $('input[name="to"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); ``` 四、使用div代替input实现日期时间选择 daterangepicker插件也提供了使用div代替input实现日期时间选择的功能。下面是一个基本的使用div代替input实现日期时间选择的示例： HTML代码： ``` <div class="divDateSelect" id="divDateSelect"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div> ``` JS代码： ``` $('#divDateSelect').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束日期 maxDate: moment(new Date()), //设置最大日期 }); ``` daterangepicker插件提供了多种日期时间选择方式，可以满足不同的开发需求。本文提供了四个部分的日期时间选择示例，希望对使用daterangepicker插件的初学者有所帮助。