jquery-ui-1.10.3.custom文件夹;不同的主题的区别在于它们引用的css不同
默认下载的样式如下:
其它样式比如我下载的样式:
下载的jqueryUI中除了css文件夹不同,其它文件均相同
(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. */ /* Written by Cloudream ([email protected]). */ jQuery(function ($) { $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], weekHeader: '周', dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: true, yearSuffix: '年' }; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });
(4)对于一些datepicker的属性和方法的详细使用,可以参考其API文档,上面讲的很详细
$("[id$=txtASN]")的使用
定义好的asp.net的textbox控件id为txtASN,但是$("#txtASN")却获取不到textbox的dom元素了,原因查看源代码后发现是其控件ID发生了变化,如果控件放在了panel中或者母版中,生成的html控件input ID就会发生变化,如pnlBaseInfo_txtASN
解决办法: $("[id$=txtASN]"),其意义就是在于获得id以txtASN结尾的dom元素
将初始化DatePicker的代码放在Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
$(function () { Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) { $("[id$=txtStartDate]").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("[id$=txtEndDate]").datepicker("option", "minDate", selectedDate); } }); $("[id$=txtEndDate]").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, onClose: function (selectedDate) { $("[id$=txtStartDate]").datepicker("option", "maxDate", selectedDate); } }); $("#ui-datepicker-div").css("font-size", "14px"); //改变大小 }); });