一、需求:
后台系统中经常会使用到的功能,选择一个时间区间,根据这个时间区间去筛选一些信息,比如,某一时间段的注册用户。
二、最后效果
三、需要引入的文件(src/index.html)
注意:1、jQuery文件先引用,因为在初始化日期插件是,需要找到DOM中的对象,添加一些样式;
2、可以看到,我项目中并没有引用bootstrap.min.css这个文件,因为是在index.html全局引用的这个样式,对已经写好的样式有很大的影响,因此产生的影响就是样式是乱掉的,你看到的效果图(第一张图片)的样式就需要自己动手啦,写一个共用的样式,在每个组件中引用。
具体样式就不加了,相信如果你引用插件的这个坑淌过来了,这点儿小事儿,就想一颗奶油巧克力,带着成就感慢慢‘品尝'吧~
四、代码部分
A、 To Date
(html代码)
JS代码
$('#endTime').datetimepicker({
format: 'yyyy-mm-dd',function () {
$('#startTime').datetimepicker('setEndDate',$("#endTime").val());
console.log( $("#endTime").val());
});
format: 'yyyy-mm-dd',function () {
$('#startTime').datetimepicker('setEndDate',$("#endTime").val());
console.log( $("#endTime").val());
});
format这个参数可以设置日期的格式,yyyy-mm-dd,yyyy/mm/dd
B、To Minute
(html代码)
<label for="dtp_input2">-
<div class="input-group date form_datetime date-div-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">