kendoDatePicker日期选择控件
1.普通的日期选择控件
$("#datePicker").kendoDatePicker({
value:new Date(), //默认日期为今日
format:'yyyy-MM-dd',
min:'2017-01-31',
max:'2019-02-20'
})
2.只选择到年
$("#datePicker").kendoDatePicker({
value:'2019',
start:'decade',
depth:'decade',
format:'yyyy',
dateInput:true
})
3.只选择到月
$("#datePicker").kendoDatePicker({
value:'2018-03',
start:'year',
depth:'year',
format:'yyyy-MM',
dateInput:true
})
3.时间范围问题
HTML部分:
<input type="text" name="time1" id="time1"> <input type="text" name="time2" id="time2">
JavaScript部分:
var start = $("#time1").kendoDatePicker({ format:'yyyy-MM-dd', change: startChange }).data("kendoDatePicker"); var end = $("#time2").kendoDatePicker({ format:'yyyy-MM-dd', change: endChange }).data("kendoDatePicker"); start.max(end.value()); end.min(start.value()); function startChange() { var startDate = start.value(), endDate = end.value(); if (startDate) { startDate = new Date(startDate); startDate.setDate(startDate.getDate()); end.min(startDate); } else if (endDate) { start.max(new Date(endDate)); } else { endDate = new Date(); start.max(endDate); end.min(endDate); } } function endChange() { var endDate = end.value(), startDate = start.value(); if (endDate) { endDate = new Date(endDate); endDate.setDate(endDate.getDate()); start.max(endDate); } else if (startDate) { end.min(new Date(startDate)); } else { endDate = new Date(); start.max(endDate); end.min(endDate); } }
效果图:


浙公网安备 33010602011771号