jQuery UI Datepicker扩展指南：轻松获取时分秒

2023-10-16 08:15:01

有时候我们不仅需要datepicker选择日期还需要选择时分秒，但是 jquery ui datepicker 不支持时分秒，本文提供了一个扩展方案。

Datepicker的准备工作

准备css文件

.ui-timepicker-div dl { 
    text-align: left; 
}

.ui-timepicker-div dl dt { 
    height: 25px; 
    margin-bottom: -25px; 
}

.ui-timepicker-div dl dd { 
    margin: 0 10px 10px 65px; 
}

.ui-timepicker-div td { 
    font-size: 90%; 
}

准备js文件

// 下拉菜单展示或隐藏控制
$(document).on('click', '.ui-timepicker-div', function(e) {
    e.stopPropagation();
});

// 输入框不允许直接输入
$(document).on('keydown', '.ui-timepicker-input', function(e) {
    e.preventDefault();
});

$.fn.datetimepicker = function(options){
    options = $.extend({}, $.fn.datetimepicker.defaults, options);

    return this.each(function() {
        var $this = $(this);
        $this.datetimepicker(options);
    });
};

$.fn.datetimepicker.defaults = {
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    changeYear: true,
    changeMonth: true,
    dateFormat: "yy-mm-dd",
    timeFormat: "hh:mm:ss",
    showSecond: true,
    timeOnly: false
};

调用插件

$("#datetimepicker").datetimepicker();

使用

添加插件后就会发现时间选择框已经可以用了，效果如下。

<input type="text" id="datetimepicker" />

扩展时分秒功能的代码

代码如下：

(function($){
    $.fn.datetimepicker = function(options){
        options = $.extend({}, $.fn.datetimepicker.defaults, options);

        return this.each(function() {
            var $this = $(this);
            $this.datetimepicker(options);
        });
    };

    $.fn.datetimepicker.defaults = {
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        changeYear: true,
        changeMonth: true,
        dateFormat: "yy-mm-dd",
        timeFormat: "hh:mm:ss",
        showSecond: true,
        timeOnly: false
    };
})(jQuery);