jquery-ui日期時間控件實現

日期控件和時間控件為獨立控件，日期時間控件要同一時候導入日期控件和時間控件的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});
	
	
});

顯示效果例如以下：

日期時間控件

日期控件

 

時間控件：