日期联动效果
2018-11-07 本文已影响2人
jerryst
ps:需要引入的插件:bootstrap.css, bootstrap-datepicker.css ,jq,bootstrap-datepicker.min.js,bootstrap-datepicker.zh-CN.min.js
一:angularjs用法
html
<div class="litModuWrap" >
<input id='startTime' ng-model='vm.startTime' placeholder="开始时间"/>
<p>—</p>
<input id='endTime' ng-model='vm.endTime' placeholder="结束时间"/>
</div>
controller
commonFn.datePicker('#startTime','#endTime');
service
//datePack:开始时间-结束时间联动
datePicker: function(beginSelector, endSelector) {
// 仅选择日期
$(beginSelector).datepicker({
language: "zh-CN",
autoclose: true,
startView: 0,
format: "yyyy-mm-dd",
timeFormat: 'hh:mm:ss',
clearBtn: true,
todayBtn: false,
endDate: new Date()
}).on('changeDate', function(ev) {
if (ev.date) {
$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$(endSelector).datepicker('setStartDate', null);
}
})
$(endSelector).datepicker({
language: "zh-CN",
autoclose: true,
startView: 0,
format: "yyyy-mm-dd",
clearBtn: true,
todayBtn: false,
endDate: new Date()
}).on('changeDate', function(ev) {
if (ev.date) {
$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
} else {
$(beginSelector).datepicker('setEndDate', new Date());
}
})
},
二:原生js用法
html
<div class="box clearfix">
<input id='startTime' type="" placeholder="开始时间" />
<span>——</span>
<input id='endTime' type="" placeholder="结束时间" />
</div>
js
datePicker('#startTime','#endTime');
//时间插件封装
function datePicker(beginSelector, endSelector) {
// 仅选择日期
$(beginSelector).datepicker({
language: "zh-CN",
autoclose: true,
startView: 0,
format: "yyyy-mm-dd",
timeFormat: 'hh:mm:ss',
clearBtn: true,
todayBtn: false,
endDate: new Date()
}).on('changeDate', function(ev) {
if (ev.date) {
$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$(endSelector).datepicker('setStartDate', null);
}
})
$(endSelector).datepicker({
language: "zh-CN",
autoclose: true,
startView: 0,
format: "yyyy-mm-dd",
clearBtn: true,
todayBtn: false,
endDate: new Date()
}).on('changeDate', function(ev) {
if (ev.date) {
$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
} else {
$(beginSelector).datepicker('setEndDate', new Date());
}
})
};