datetimepicker

datetimepicker是一个基于jQuery的十分灵活且强大的日期表单控件。

DEMO：

常用参数：

{
    // 设置主体颜色
    theme:'dark',
    // (懒加载)触发时添加相关dom ,不能跟value同时使用
    lazyInit:true,
    // 表单默认值
    value: new Date(),
    // 是否显示时间控件 默认：true
    timepicker: true,
    // 日期格式化
    formatDate:'Y-m-d',
    // 时间格式化
    formatTime:'H:i:s',
    // 时间控件的时间间隔
    step:5,
    // 整体格式化
    format: 'Y-m-d H:i:s',
    // 最小可选日期（0表示今天、'-1970/01/02'表示昨天）
    minDate: '-1970/01/02',
    // 最大可选日期
    maxDate: "2020-11-11",
    // 最小可选时间 0 表示当前时间
    minTime: 0,
    // 最大可选时间
    maxTime: "23:00:00",
    // 平面显示
    inline:true,
    // 是否显示时间组件的滚动条
    timepickerScrollbar: false,
    // 年份开始时间
    yearStart: 1990,
    // 年份结束时间
    yearEnd: 2020,
    // 一周开始顺序 0 为周日
    dayOfWeekStart: 1,
    // 禁用具体日期
    disabledDates:['2019-6-19'],
    //禁用周六、周日 0为周日
    disabledWeekDays:[6,0],

    /**
     * 选择具体日期以后执行回调
     * @param current_time 选择的日期Date实例
     * @param $input 绑定input的jquery对象
     * @param event 事件对象
     */
    onSelectDate: function (current_time, $input, event) {
        console.log(arguments);
    },
    /**
     * 选择时间以后执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     * @param event 事件对象
     */
    onSelectTime: function (current_time, $input, event) {
        console.log(arguments);
    },
    /**
     * 切换月份以后执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     */
    onChangeMonth: function (current_time, $input) {
        console.log(arguments);
    },
    /**
     * 切换年份以后执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     */
    onChangeYear: function (current_time, $input) {
        console.log(arguments);
    },
    /**
     * 日期改变执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     * @param event 事件对象
     */
    onChangeDateTime: function (current_time, $input, event) {
        console.log(arguments);
    },
    /**
     *  日期插件显示以后执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     * @param event 事件对象
     */
    onShow: function (current_time, $input, event) {
        console.log(arguments);
    },
    /**
     *  日期插件隐藏以后执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     * @param event 事件对象
     */
    onClose: function (current_time, $input, event) {
        console.log(arguments);
    },
    /**
     * 初始化成功执行回调
     * @param current_time 选择的时间Date实例
     * @param $input 绑定input的jquery对象
     */
    onGenerate: function (current_time, $input) {
        console.log(arguments);
    }
}

常用方法：

设置使用语言

$.datetimepicker.setLocale('zh');

显示

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    $('#input').datetimepicker('show');
});

隐藏

$('#input').datetimepicker();
$(window).on('resize', function () {
    $('#input').datetimepicker('hide');
});

切换显示状态

$('#input').datetimepicker();
$('button.trigger').on('click', function () {
    $('#input').datetimepicker('toggle');
});

注销

$('#input').datetimepicker();
$('#input').datetimepicker('destroy');

重置

$('#input').datetimepicker();
$('#input').val('12/01/2006');
$('#input')
    .datetimepicker('show')
    .datetimepicker('reset')

获取值

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    var d = $('#input').datetimepicker('getValue');
    console.log(d.getFullYear());
});

详情查看官方文档