比较好的日期+time的jquery控件

http://trentrichardson.com/examples/timepicker/

脚本下载地址 ： https://files.cnblogs.com/Mac_Hui/jquery-ui-timepicker-addon.7z

Add a simple datetimepicker to jQuery UI's datepicker

$('#basic_example_1').datetimepicker();

Add only a timepicker:

$('#basic_example_2').timepicker();

Format the time:

$('#basic_example_3').datetimepicker({
        timeFormat: "hh:mm tt"
});

Using Timezones

Simplest timezone usage:

$('#timezone_example_1').datetimepicker({
        timeFormat: 'hh:mm tt z',
        showTimezone: true
});

Define your own timezone options:

$('#timezone_example_2').datetimepicker({
        timeFormat: 'HH:mm z',
        showTimezone: true,
        timezoneList: [ 
                        { value: '-0500', label: 'Eastern'}, 
                        { value: '-0600', label: 'Central' }, 
                        { value: '-0700', label: 'Mountain' }, 
                        { value: '-0800', label: 'Pacific' } 
                ]
});

Use timezone string abbreviations for values:

$('#timezone_example_3').datetimepicker({
        timeFormat: 'HH:mm z',
        showTimezone: true,
        timezone: 'MT',
        timezoneList: [ 
                        { value: 'ET', label: 'Eastern'}, 
                        { value: 'CT', label: 'Central' }, 
                        { value: 'MT', label: 'Mountain' }, 
                        { value: 'PT', label: 'Pacific' } 
                ]
});

Slider Modifications

Add a grid to each slider:

$('#slider_example_1').timepicker({
        hourGrid: 4,
        minuteGrid: 10,
        timeFormat: 'hh:mm tt'
});

Set the interval step of sliders:

$('#slider_example_2').datetimepicker({
        showSecond: true,
        timeFormat: 'HH:mm:ss',
        stepHour: 2,
        stepMinute: 10,
        stepSecond: 10
});

Add sliderAccess plugin for touch devices:

$('#slider_example_3').datetimepicker({
        addSliderAccess: true,
        sliderAccessArgs: { touchonly: false }
});

Use dropdowns instead of sliders. By default if slider is not available dropdowns will be used.

$('#slider_example_4').datetimepicker({
        controlType: 'select',
        timeFormat: 'hh:mm tt'
});

Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).

var myControl=  {
        create: function(tp_inst, obj, unit, val, min, max, step){
                $('<input class="ui-timepicker-input" value="'+val+'" >')
                        .appendTo(obj)
                        .spinner({
                                min: min,
                                max: max,
                                step: step,
                                change: function(e,ui){ // key events
                                                tp_inst._onTimeChange();
                                                tp_inst._onSelectHandler();
                                        },
                                spin: function(e,ui){ // spin events
                                                tp_inst.control.value(tp_inst, obj, unit, ui.value);
                                                tp_inst._onTimeChange();
                                                tp_inst._onSelectHandler();
                                        }
                        });
                return obj;
        },
        options: function(tp_inst, obj, unit, opts, val){
                if(typeof(opts) == 'string' && val !== undefined)
                                return obj.find('.ui-timepicker-input').spinner(opts, val);
                return obj.find('.ui-timepicker-input').spinner(opts);
        },
        value: function(tp_inst, obj, unit, val){
                if(val !== undefined)
                        return obj.find('.ui-timepicker-input').spinner('value', val);
                return obj.find('.ui-timepicker-input').spinner('value');
        }
};

$('#slider_example_5').datetimepicker({
        controlType: myControl
});

Alternate Fields

Alt field in the simplest form:

$('#alt_example_1').datetimepicker({
        altField: "#alt_example_1_alt"
});

With datetime in both:

$('#alt_example_2').datetimepicker({
        altField: "#alt_example_2_alt",
        altFieldTimeOnly: false
});

Format the altField differently:

$('#alt_example_3').datetimepicker({
        ampm: true,
        altField: "#alt_example_3_alt",
        altFieldTimeOnly: false,
        altFormat: "yy-mm-dd",
        altTimeFormat: "h:m t",
        altSeparator: " @ "
});

With inline mode using altField:

PrevNext

December 2012

Time

00:00

Hour

Minute

Second

Millisecond

Time Zone

-1200-1100-1000-0930-0900-0800-0700-0600-0500-0430-0400-0330-0300-0200-0100+0000+0100+0200+0300+0330+0400+0430+0500+0530+0545+0600+0630+0700+0800+0845+0900+0930+1000+1030+1100+1130+1200+1245+1300+1400

Now

$('#alt_example_4').datetimepicker({
        altField: "#alt_example_4_alt",
        altFieldTimeOnly: false
});