DateTimePicker实例
DateTimePicker的各类使用实例。
默认日期时间选择器datetimepicker
时间格式:年/月/日 时:分
<input id="datetimepicker" type="text" ><!--输入框-->
<script>
$('#datetimepicker').datetimepicker();//初始化
$.datetimepicker.setLocale('zh');//使用中文
</script>
设置日期时间格式
时间格式:年-月-日 时:分
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
format:'Y-m-d H:i',
theme: 'dark'
});
$.datetimepicker.setLocale('zh');
</script>
日期选择器datepicker
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
timepicker:false,
format:'Y-m-d'
});
$.datetimepicker.setLocale('zh');
</script>
时间选择器timepicker
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
datepicker:false,
format:'H:i'
});
$.datetimepicker.setLocale('zh');
</script>
时间设为10分钟间隔
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
step:10,
format:'Y-m-d H:i'
});
$.datetimepicker.setLocale('zh');
</script>
设置日期时间的可选择范围
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
format:'Y-m-d H:i',
minDate:'2020/08/15',
maxDate:0,//今天
minTime:'3:00',
maxTime:'23:00'
});
$.datetimepicker.setLocale('zh');
</script>
设置input初始值
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
value: '2020-01-02 03:04',
format:'Y-m-d H:i'
});
$.datetimepicker.setLocale('zh');
</script>
设置datetimepicker一直显示
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
inline: true,
format:'Y-m-d H:i'
});
$.datetimepicker.setLocale('zh');
</script>
设置不可点击的星期
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
disabledWeekDays: [0,2],
format:'Y-m-d H:i'
});
$.datetimepicker.setLocale('zh');
</script>
监听点击日期时的事件
<input id="datetimepicker" type="text" >
<script>
$('#datetimepicker').datetimepicker({
onSelectDate: function(dateText, inst){
alert("您选择的是"+dateText.dateFormat('Y-m-d'));
}
format:'Y-m-d H:i'
});
$.datetimepicker.setLocale('zh');
</script>
获取datetimepicker值
<input id="datetimepicker" type="text" >
<button id="button1">查看</button>
<script>
$('#datetimepicker').datetimepicker({
format:'Y-m-d H:i',
value:'2018-12-12 00:30'
});
$.datetimepicker.setLocale('zh');
$('#button1').on('click', function () {
var d = $('#datetimepicker').datetimepicker('getValue');
alert(d.getFullYear());
});
</script>