一、需求:
后台系统中经常会使用到的功能,选择一个时间区间,根据这个时间区间去筛选一些信息,比如,某一时间段的注册用户。
三、需要引入的文件(src/index.html)
注意:1、jQuery文件先引用,因为在初始化日期插件是,需要找到DOM中的对象,添加一些样式;
2、可以看到,我项目中并没有引用bootstrap.min.css这个文件,因为是在index.html全局引用的这个样式,对已经写好的样式有很大的影响,因此产生的影响就是样式是乱掉的,你看到的效果图(第一张图片)的样式就需要自己动手啦,写一个共用的样式,在每个组件中引用。
具体样式就不加了,相信如果你引用插件的这个坑淌过来了,这点儿小事儿,就想一颗奶油巧克力,带着成就感慢慢‘品尝'吧~
A、 To Date
(HTML代码)
JS代码
插件 -- 选择到天
$('#startTime').datetimepicker({
format: 'yyyy-mm-dd',//
显示格式
todayHighlight: 1,//今天高亮
minView: "month",//设置只
显示到月份
startView:2,forceParse: 0,showMeridian: 1,autoclose: true,//选择后
自动关闭
language: 'zh-CN',weekStart: 1,// todayBtn: 1,// autoclose: 1,// todayHighlight: 1,// startView: 2,// minView: 2,// forceParse: 0,// pickerPosition:'bottom-right'//日期
插件弹出的位置
}).on("changeDate",function () {
$('#endTime').datetimepicker('setStartDate',$("#startTime").val());
console.log( $("#startTime").val());
$("#endTime").focus()
});
$('#endTime').datetimepicker({
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代码)
<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">
插件 -- 选择到分钟
$('#startTimeMinute').datetimepicker({
//language: 'fr',format: 'yyyy-mm-dd hh:ii',//
显示格式
weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,showMeridian: 1
}).on("changeDate",function () {
$('#endTimeMinute').datetimepicker('setStartDate',$("#startTimeMinute").val());
console.log( $("#startTimeMinute").val());
$("#endTimeMinute").focus()
});
$('#endTimeMinute').datetimepicker({
//language: 'fr',showMeridian: 1
}).on("changeDate",function () {
$('#startTimeMinute').datetimepicker('setEndDate',$("#endTimeMinute").val());
console.log( $("#endTimeMinute").val());
});