jQuery 日期选择器插件详解.doc

JQuery官方地址：/你可以在这里下载到JQuery的核心框架的最新版本，包括未压缩的和已压缩的，不压缩的话有98K，简装压缩版只有15KDatepicker的演示地址：/repository/latest/demos/functional/#ui.datepicker包括自定义格式，资源本地化等，都有相应的源代码。Datepicker的下载地址：/download_builder/包括UI系列组件的下载地址，你可以在左边选择不同版本以及是否压缩，以何种方式压缩。这个页面的好处在于，你可以完全订制自己的脚本，本例中我们只需要Datepicker，所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。Datepicker的皮肤(CSS):/pages/code/jquery-ui-datepicker演示页面：/article/jquery-ui-datepicker-themes给个图：OK，接下来堆代码：JQuery官方地址：/你可以在这里下载到JQuery的核心框架的最新版本，包括未压缩的和已压缩的，不压缩的话有98K，简装压缩版只有15KDatepicker的演示地址：/repository/latest/demos/functional/#ui.datepicker包括自定义格式，资源本地化等，都有相应的源代码。Datepicker的下载地址：/download_builder/包括UI系列组件的下载地址，你可以在左边选择不同版本以及是否压缩，以何种方式压缩。这个页面的好处在于，你可以完全订制自己的脚本，本例中我们只需要Datepicker，所以只下载这一个和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它们两个分开下载的。78K的Datepicker压缩后只有23K。Datepicker的皮肤(CSS):/pages/code/jquery-ui-datepicker演示页面：/article/jquery-ui-datepicker-themes给个图：OK，接下来堆代码：然后在head节中加入：在body节中加入 $(document).ready(function() $(#).datepicker($.extend(, $.datepicker.regionalzh-CN, showStatus: true, showOn: both, buttonImage: /images/small/calendar.gif, buttonImageOnly: true ); );jQueryUI中Datepicker(日历)插件的介绍和使用Datepicker插件的属性：属性数据类型默认值说明altFieldString使用备用的输出字段，即将选择的日期以另一种格式，输出到另一个控件中，值为选择符，即要输出的控件altFormatStringaltField输出的格式，详细格式见formatDate方法appendTextString指定每个日期字段后面显示的文本autoSizeBooleanfalse是否自动调整控件大小，以适应当前的日期格式的输入buttonImageString指定弹出按钮图像的URL，若设置则buttonText将成为alt值buttonImageOnlyBooleanfalse是否将图像放在控件后面，作为触发器buttonTextString.指定触发按钮上显示的文本，showOn属性应设置为button或bothchangeMonthBooleanfalse是否使用下拉列表选择月份changeYearBooleanfalse是否使用下拉列表选择年份closeTextStringDone指定关闭链接显示的文本dateFormatStringmm/dd/yy指定显示日期的格式defaultDateDateStringNumbernull首次打开显示的日期，可以用Date对象指定一个实际日期，或指定距离今天的天数（如+7）、字符串（y表示年、m表示月、w表示周、d表示天，如+1m+7d）默认为null，表示今天durationNumberStringnormal日期选择器呈现的速度，可以为毫秒数firstDayNumber0设置每周的第一天，0表示星期日，1表示星期一等maxDateDateNumberStringnull可以选择的最大日期。null表示无限制格式见defaultDateminDateDateNumberStringnull可以选择的最小日期，null表示无限制格式见defaultDatenumberOfMonthsNumberArray1设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数selectOtherMonthsBooleanfalse是否可以选择非当前月的日期，showOtherMonths属性必须为trueshortYearCutoffStringNumber+10设置截止的年份的值，若为数字（099）则直接使用其值，若是字符串，则转化为数字并与当前年份相加。当超过截止年份时，则被认为是上个世纪showAnimStringshow设置显示或隐藏的动画名showButtonPanelBooleanfalse是否显示按钮面板showCurrentAtPosNumber0指定在多月份显示时，当前月份位于何处，从左上方0算起showMonthAfterYearBooleanfalse是否在标题中的年份后显示月份showOnStringfocus设置触发选择器的事件名称showOtherMonthsBooleanfalse是否显示其他月份stepMonthsNumber1指定单击上月下月链接时，移动几个月yearRangeStringc-10:c+10设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn）第一个日历插件的使用实例首先导入需要的类库文件：首先进行页面代码的编写：htmlview plaincopy1. 2. 3. Date:4. 5. 然后使用js代码对插件进行调用javascriptview plaincopy1. ：2. 3. 4. 5. $(function()6. 7. /插件的调用8. 9. $(#datepicker).datepicker(10. 11. /在这里进行插件的属性设置12. 13. );14. 15. );16. 17. 效果截图：下面通过实例对一些常用属性进行验证：1、altField ：使用备用的输出字段，即将选择的日期以另一种格式，输出到另一个控件中，值为选择符，即要输出的控件 altFormat：altField输出的格式实例验证：页面代码：htmlview plaincopy1. 2. 3. Date:4. 5. 6. 7. Js代码：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. altField:#alternate,6. 7. altFormat:DD,dMM,yy8. 9. );10. 11. );效果截图：2、showAnim：设置日期面板显示或隐藏的动画名js代码的编写：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker();4. 5. $(#anim).change(function()6. 7. $(#datepicker).datepicker(option,showAnim,$(this).val();8. 9. );10. 11. );3、showButtonPanel：是否显示按钮面板Js代码：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showButtonPanel:true4. 5. );如图可以看到面板下方有两个按钮：点击“今天”会跳到今天的日期，点击“关闭”会关闭面板。4、dateFormat：指定显示日期的格式Js代码：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. dateFormat:yy/mm/dd4. 5. );效果截图：通过图像可以看到，文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式，可以根据自己的喜好进行设置。5、changeMonth：是否使用下拉列表选择月份changeYear：是否使用下拉列表选择年份在js代码中添加此属性：changeMonth:true或者changeYear:true其中标题栏的月份或者年份会出现下拉菜单的形式：6、yearRange：设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn）在js代码中添加属性：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. changeYear:true,4. 5. yearRange:2011:20126. 7. );效果截图：从图中可以看到年的位置为下拉菜单的形式，其中下拉菜单只会出现2011与2012年的选项。注：yearRange属性只有在changeYear为true的情况下才使用。7、numberOfMonths：设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数Js代码：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. numberOfMonths:34. 5. );上面指定numberOfMonths为3，那么弹出的日历面板就会显示当前以及以后两个月，如图：8、showOn：设置触发选择器的事件名称buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或bothbuttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观这里我编写三个文本框进行以上属性的对比：1)Js代码：javascriptview plaincopy1. $(#datepicker2).datepicker(2. 3. showOn:both,4. 5. buttonText:日历按钮6. 7. );效果截图：2）将按钮设置为图片：Js代码：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showOn:button,4. 5. buttonImage:images/calendar.gif,6. 7. buttonImageOnly:true8. 9. );未设置buttonImageOnly属性的效果：设置buttonImageOnly属性为true后：通过以上对比，可以理解buttonImageOnly属性的作用。9、minDate：可以选择的最小日期，null表示无限制maxDate：可以选择的最大日期。null表示无限制两者都是根据以当天日期为基础的。Js代码：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. /表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择6. 7. minDate:-20,8. 9. maxDate:+10D10. 11. );12. 13. );如下图在7号之前都不可选择（当前日期为27）：jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)使用jQuery ui首先需要引入jQuery类库，jQuery ui js脚本和jQuery ui css样式表。代码示例如下：注：引入js脚本时，需先引入jQuery类库，后引入jQuery ui脚本下面为两种实现步骤：思路一：第一步实现两个datepicker组件。需要定义两个input标签，类型为text，并指定id属性HTML代码如下开始日期：结束日期：在js代码中得到两个input元素的jQuery对象，并将其转化为datepicker组件Js代码如下javascriptview plaincopy1. $(document).ready(function()2. 3. $(#start).datepicker();4. 5. $(#end).datepicker();6. 7. );实现以上操作后，在页面中点击文本框，如果出现datepicker则代表成功。第二步设置开始和结束日期当选择开始日期的值后，则结束日期的最小值应该就是开始日期；同理，当选择结束日期后，开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件，通过该事件来指定对应的datepicker最小日期或最大日期。Js代码如下javascriptview plaincopy1. $(#start).datepicker(2. 3. onSelect:function(dateText,inst)4. 5. $(#end).datepicker(option,minDate,dateText);6. 7. 8. 9. );10. 11. $(#e