jquery-ui日期時間控制項實現

標籤：UI   art   script   獨立   pop   form   color   fill   std   

日期控制項和時間控制項為獨立控制項，日期時間控制項要同一時候匯入日期控制項和時間控制項的js，然後在日期控制項加入時間控制項顯示參數，沒有匯入時間控制項js。日期控制項函數設定的時間控制項參將包錯

日期控制項官網網址：http://jqueryui.com/

日期控制項js：jquery-ui.js

相應函數及預設屬性設定：function Datepicker()

時間控制項官網網址：http://plugins.jquery.com/jt.timepicker/

時間控制項js：jquery-ui-timepicker-addon.js

相應函數及預設屬性設定：function Timepicker()

$(function(){/** * 為時間欄位設定時間格式 TODO  需考慮最佳化選取器。排除hidden類型的 */ //日期帶時間（放在time前面避免被覆蓋）//$(‘input[id$=DateTime],[id$=dateTime],[id$=Datetime],[id$=datetime],[class$=DateTime]‘).datetimepicker({showSecond: true,hourGrid:4,minuteGrid: 10, timeFormat: ‘hh:mm:ss‘});$(‘input[id$=DateTime],[id$=dateTime],[id$=Datetime],[id$=datetime],[class$=DateTime],[class$=dateTime],[class$=datetime],[class$=DateTime]‘).datetimepicker({ dayNamesMin: [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘],// 設定控制項的星期名稱顯示firstDay: 1, //設定排在第一列的是星期幾，星期天為0。星期一為1，以此類推。changeMonth: true,  //改變月份下拉框changeYear: true,    //改變年份下拉框showSecond: true,    //顯示毫秒monthNamesShort:[‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘],timeFormat: ‘hh:mm:ss‘,  //設定時間格式dateFormat: ‘yy-mm-dd‘, //設定日期格式hourGrid: 4,//顯示時間尺規minuteGrid: 10,secondGrid:10});//日期$(‘input[id$=Date],[id$=date],[class$=Date],[class$=date]‘).datepicker({ dayNamesMin: [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘],// 設定控制項的星期名稱顯示firstDay: 1, //設定排在第一列的是星期幾，星期天為0，星期一為1，以此類推。changeMonth: true,  //改變月份下拉框changeYear: true,    //改變年份下拉框monthNamesShort:[‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘],dateFormat: ‘yy-mm-dd‘ //設定日期格式});//時間   顯示秒   設定格式$(‘input[id$=Time],[id$=time],[class$=Time]‘).timepicker({showSecond: true,timeFormat: ‘hh:mm:ss‘,hstep:‘2‘,hourGrid: 4,minuteGrid: 10});});

顯示效果例如以下：

日期時間控制項

日期控制項

 

時間控制項：

jquery-ui日期時間控制項實現