JS日期時間選取器

JS日期時間選取器

 

本文介紹一種日期和時間選取器的用法。此選取器由jqueryUI實現，支援精確到毫秒的時間選擇。

此選取器項目地址為http://trentrichardson.com/examples/timepicker/

Demo地址為：http://www.helloweba.com/demo/timepicker/

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

 

 

 

大體使用步驟

此控制項使用非常簡單，只需要引入js和css，然後在加上一句jquery代碼即可。

 

引入js庫

<scripttype=text/javascript src=../Commons/DateTimePicker/js/jquery-1.7.2.min.js></script>

<scripttype=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui.js></script>

<scripttype=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui-slide.min.js></script>

<script type=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui-timepicker-addon.js></script>

 

引入樣式

 

<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>

除了引入jquery ui的樣式外，還需額外加入以下樣式，用於控制時間控制項的外觀。

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

 

初始化控制項

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

如果只需要顯示時間，則：

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

定義時間格式：

$('#example_3').datetimepicker({

showSecond: true,

showMillisec: true,

timeFormat: 'hh:mm:ss:l'

});