原来用的日期选择不太好,首先是界面问题,其次是调用问题,所以索性就换了个日期选择器。网上找了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 );
}
});