jquery-ui日期时间控件实现

Posted gccbuaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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});
	
	
});


显示效果例如以下:

日期时间控件

技术分享

技术分享

日期控件

技术分享

 技术分享

时间控件:

技术分享

技术分享













以上是关于jquery-ui日期时间控件实现的主要内容,如果未能解决你的问题,请参考以下文章

jquery-ui中的datapicker的跨浏览器判断

jQuery-UI 日期选择器默认日期

jquery-ui datepicker 设置开始结束时间选择范围

添加一个包含 javascript 的用户控件会破坏 jquery-ui

jquery怎样把日期控件输入的日期写入span,绑定日期控件的输入框不输入任何内容?

带有自举程序的日期选择器对齐的问题