JQueryUI datepicker使用总结

原来用的日期选择不太好，首先是界面问题，其次是调用问题，所以索性就换了个日期选择器。网上找了jqueryUI的datepicker。

使用过程中当然出现了很多问题。在下载文件中找到了一些demo，其中它们的css样式应用了demo.css，也就是自己定义的css。我认为既然是demo.css，将它放入项目中不太合理，就取消了这个css。之后就出现了问题：我的datepicker似乎特别大。其次是我添加了按钮栏，默认的是今天按钮与关闭按钮，但是今天按钮无法将日期打印到文本框里，而是只是定了个位，将我们的选择定位到今天的日期，而且今天按钮与关闭按钮不同，它的文字是灰色的，所以我根据网上的办法为它改了方法，并且改了样式。

网上一位大神的解决方法：http://blog.163.com/zhi_qingfang@126/blog/static/117477563201231113555786/

遇到的问题都迎刃而解

 

接下来简单写点datepicker的使用方法。

官方文档说明了为datepicker设置值的两种方式。

一是直接用初始化的方式，我理解为构造方式

$(function() {
		$( "#datepicker" ).datepicker();
	});

　　其中参数JSON数据格式,参数可以设置日期选择器的时间选择范围，是否使用小图标按钮，是否有按钮栏，等等。

第二种方式是相当于set方法。在构造了之后，可以改变datepicker的行为，

$( "#endDate" ).datepicker( "option", "属性名","属性值"}   //如果要使用get方法，就不用传递属性值 

至于属性名有哪些，只有看文档了。。。　　

以下是我混合了两种方式的代码。这段代码的意思是创建两个日期选择器，选择开始时间与截止时间，两个选择器之间有约束，开始不能晚于结束

	$("#startDate").datepicker({
　　　　　　　　　　　　　　//显示按钮栏
			showButtonPanel:true,
　　　　　　　　　　　　　　//使用日历小图标与文本框激活时间选择
			showOn: "both",
　　　　　　　　　　　　　　//图标地址
			buttonImage: "<%=path%>/webmag/images/calendar.gif",
　　　　　　　　　　　　　　//仅仅显示小图标
			buttonImageOnly: true,
　　　　　　　　　　　　　　//最小日期不能早与当天日期，这个值是相对值
			 minDate: 0,
　　　　　　　　　　　　　　//先择日期之后，对另一个datepicker设置最小时间，不能早于选择的时间
			onSelect: function( selectedDate ) {
				$( "#endDate" ).datepicker( "option", "minDate", selectedDate );
			}
	});
	$("#endDate").datepicker({
			showButtonPanel:true,
			showOn: "both",
			minDate: 0,
			buttonImage:"<%=path%>/webmag/images/calendar.gif",
			buttonImageOnly: true,
			onSelect: function( selectedDate ) {
				$( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
			}
	});