JS Date Time Picker

This article describes the use of a date and time selector. This selector is implemented by the jQueryUI, which supports time selection up to milliseconds.

This selector project address is http://trentrichardson.com/examples/timepicker/

The demo address is: http://www.helloweba.com/demo/timepicker/

: http://download.csdn.net/detail/yanwushu/7721933

In addition, the JS time Picker can also refer to other projects

http://www.bootcss.com/p/bootstrap-datetimepicker/

http://guangqiang.iteye.com/blog/1559262

General use steps

This control is very simple to use, just introduce JS and CSS, and then add a jquery code.

Introduction of JS Library

<scripttype= "Text/javascript" src= ". /commons/datetimepicker/js/jquery-1.7.2.min.js "></script>

<scripttype= "Text/javascript" src= ". /commons/datetimepicker/js/jquery-ui.js "></script>

<scripttype= "Text/javascript" src= ". /commons/datetimepicker/js/jquery-ui-slide.min.js "></script>

<script type= "Text/javascript" src= ". /commons/datetimepicker/js/jquery-ui-timepicker-addon.js "></script>

Introduce styles

<link rel= "stylesheet" type= "Text/css" href= "Css/jquery-ui.css"/>

<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>

<script type= "Text/javascript" src= "Js/jquery-ui.js" ></script>

<script type= "Text/javascript" src= "Js/jquery-ui-timepicker-addon.js" ></script>

In addition to the style that introduces the jquery UI, you need to add the following styles to control the appearance of the time control.

. ui-timepicker-div. ui-widget-header {margin-bottom:8px;}

. 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%;}

. ui-tpicker-grid-label {background:none; border:none; margin:0; padding:0;}

. Ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label,

. ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}

Initializing the control

< Input type= "text"  id= "Example" &NBSP;/>&NBSP;

$ (' #example_1 '). DateTimePicker ();  

If you only need to display the time:

$ (' #example_2 '). Timepicker ();  

Define time Format:

$ (' #example_3 '). DateTimePicker ({ 

Span style= "COLOR: #365F91" >&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;SHOWSECOND:&NBSP;TRUE,&NBSP;

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;SHOWMILLISEC:&NBSP;TRUE,&NBSP;

     timeformat:  ' hh:mm:ss:l '  

})