使用参考:http://www.bootcdn.cn/smalot-bootstrap-datetimepicker/readme/
定义控件类型:
$(':text[data-ride="datetime"], input[type="datetime"]').datetimepicker({ language: 'zh-CN', format: 'yyyy/mm/dd hh:ii', autoclose: true, clearBtn: true, todayBtn: true, todayHighlight: true, bootcssVer: 3, fontAwesome: true });
页面改变控件类型:
//改变日期的类型 function changeType() { var type = $('#dateType').val(); var myDate = new Date(); if (type !== $('#dateStart').attr('data-ride') || type !== $('#dateEnd').attr('data-ride')) { $('#dateStart').datetimepicker('remove'); $('#dateEnd').datetimepicker('remove'); $('#dateStart').attr('data-ride', type); $('#dateEnd').attr('data-ride', type); } if (type === "year") { $('#dateStart,#dateEnd').datetimepicker({ language: 'zh-CN', format: 'yyyy', autoclose: true, bootcssVer: 3, fontAwesome: true, startView: 4, minView: 4, maxView: 4, minuteStep: 1 }); $('#dateStart').val(myDate.getFullYear()); $('#dateEnd').val(myDate.getFullYear()); $('#dateEnd').attr('disabled', true); } if (type === "month") { $('#dateStart,#dateEnd').datetimepicker({ language: 'zh-CN', format: 'yyyy/mm', autoclose: true, bootcssVer: 3, fontAwesome: true, startView: 3, minView: 3, maxView: 4, minuteStep: 1 }); $('#dateStart').val(myDate.getFullYear() + "/" + (myDate.getMonth()+1)); $('#dateEnd').val(myDate.getFullYear() + "/" + (myDate.getMonth() + 1)); $('#dateStart').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1)); $('#dateEnd').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1)); $('#dateEnd').removeAttr('disabled'); } if (type === "day") { $('#dateEnd,#dateStart').datetimepicker({ language: 'zh-CN', format: 'yyyy/mm/dd', autoclose: true, bootcssVer: 3, fontAwesome: true, startView: 2, minView: 2, maxView: 4, minuteStep: 1 }); $('#dateStart').val(myDate.toLocaleDateString()); $('#dateEnd').val(myDate.toLocaleDateString()); $('#dateStart').datetimepicker('setEndDate', myDate.toLocaleDateString()); $('#dateEnd').datetimepicker('setEndDate', myDate.toLocaleDateString()); $('#dateEnd').removeAttr('disabled'); } }
在做控件类型变更的时候遇到了几个问题:
1、如何变更定义不同类型的时间控件(年、月、日)。
这个需要通过定义控件类型,实现定义好不同类型的时间控件。然后再页面统计属性调用。
2、如何改变时间控件的类型
这个我则是通过JQ的attr方法改变控件的属性值,从而达到改变控件的类型。
3、为什么attr动态改变类型后,datetimepicker依旧不生效
这个我发现datetimepicker这个控件是在js代码加载后动态生成的页面代码,改变类型无法直间改变生成的代码。只能先移除datetimepicker,然后再添加datetimepicker方能达到效果。
4、如何将时间控件的时间设置成当前时间。
改变类型后,赋值即可。
5、如何限制可选时间范围。
datetimepicker提供了setEndDate这个接口用于设置可选最终时间,调用设置即可。