DateTimePicker 示例

基本使用

最简单的日期时间选择器配置

$('#basic-picker').datetimepicker();
                        

仅日期选择

禁用时间选择功能

$('#date-only-picker').datetimepicker({
    timepicker: false,
    format: 'Y-m-d'
});
                        

仅时间选择

禁用日期选择功能

$('#time-only-picker').datetimepicker({
    datepicker: false,
    format: 'H:i'
});
                        

自定义格式

使用自定义的日期时间格式

$('#custom-format-picker').datetimepicker({
    format: 'Y年m月d日 H时i分'
});
                        

10分钟间隔

设置时间选择的步进间隔为10分钟

$('#step-picker').datetimepicker({
    step: 10,
    format: 'Y-m-d H:i'
});
                        

日期时间范围限制

限制可选择的日期时间范围

$('#range-picker').datetimepicker({
    minDate: 0,  // 今天
    maxDate: '+1970/01/07',  // 未来7天
    minTime: '8:00',
    maxTime: '20:00'
});
                        

设置初始值

为选择器设置默认的初始值

$('#value-picker').datetimepicker({
    value: '2024-03-15 14:30'
});
                        

始终显示

日期时间选择器始终保持显示状态

$('#inline-picker').datetimepicker({
    inline: true
});
                        

禁用特定星期

设置星期六和星期日不可选

$('#disable-days-picker').datetimepicker({
    beforeShowDay: function(date) {
        if (date.getDay() == 6 || date.getDay() == 0)
            return [false, ""];
        return [true, ""];
    }
});
                        

事件监听

监听日期选择事件并显示选中的值

$('#event-picker').datetimepicker({
    onSelectDate: function(ct, $i) {
        $('#event-result').text('选择的日期: ' + ct.dateFormat('Y-m-d'));
    }
});
                        

获取和设置值

动态获取和设置日期时间值

// 获取值
var value = $('#get-set-picker').val();
// 设置值
$('#get-set-picker').val('2024-03-15 14:30');
// 或使用 datetimepicker 的方法
$('#get-set-picker').datetimepicker({
    value: '2024-03-15 14:30'
});