JS Date Time Selector

Original address: http://www.yanwushu.com/post/44.html

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

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

Demo Address: http://www.helloweba.com/demo/timepicker/

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

Effect chart

In addition to the JS time selector can also refer to other projects

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

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

General steps to use

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>

Introducing 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 introducing the jquery UI style, the following styles are added 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 Controls

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

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

If you only need to display the time:

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

Define Time Format:

$ (' #example_3 '). DateTimePicker ({

Showsecond:true,

Showmillisec:true,

timeformat: ' Hh:mm:ss:l '

});