jquery UI Datepicker时间控件的使用及问题解决时间控件的使用及问题解决
本文实例为大家分享了jqueryUI中datepicker的使用，解决与asp.net中的UpdatePanel联合使用时的失效问题。
1.jqueryUI的的datepicker的使用的使用
–>首先在首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式官网上根据你的需要下载适合你系统主题的样式，jqueryUI主题：下载地址；
–>下载后的文件下载后的文件
jquery-ui-1.10.3.custom文件夹；不同的主题的区别在于它们引用的css不同
默认下载的样式如下：
其它样式比如我下载的样式：
下载的jqueryUI中除了css文件夹不同，其它文件均相同
–>页面中的使用页面中的使用datePicker的步骤的步骤
(1)引入jquery-ui-1.10.3.custom.min.css样式文件
(2)引入jquery-1.9.1.js和jquery-ui-1.10.3.custom.min.js脚本文件；注意：先引入jquery文件
(3)我的需求是制作一个起始时间和一个终止时间的选择。
代码如下：
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtEndDate").datepicker("option", "minDate", selectedDate);
}
});
$("#txtEndDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtStartDate").datepicker("option", "maxDate", selectedDate);
}
});
$("#ui-datepicker-div").css("font-size", "12px"); //改变大小
});
</script>
</head>
<body>
<label for="from">开始时间：</label>
<input type="text" id="txtStartDate" name="from"/>
<label for="to">结束时间：</label>
<input type="text" id="txtEndDate" name="to"/>
</body>
注：
(1)$(“#ui-datepicker-div”).css(“font-size”, “12px”); 用来改变日期控件的大小
(2)dateFormat: “yy-mm-dd”,改变日期格式
(3)日期控件为英文版本，加入一段脚本将其汉化
/* Chinese initialisation for the jQuery UI date picker plugin. */
评论0