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>