Jquery UI的日历控件datepicker限制日期(转)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery UI的日历控件datepicker限制日期(转),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3121字,纯文字阅读大概需要5分钟。
内容图文
![Jquery UI的日历控件datepicker限制日期(转)](/upload/InfoBanner/zyjiaocheng/1331/219c721831394e068a44fab8450d9fcc.jpg)
1 现在jquery用的很广泛,一方面是其强大的库,另一方面是它的插件很丰富。最近用了jquery的datepicker插件,感觉很棒,界面很漂亮,功能齐全,且扩展性很好。强烈推荐使用。 2 3 项目中有一个需求,要禁用某些日期,比如周末,节假日。看了datepicker的源码,发现里面有一个noWeekends方法可非常简单地实现禁用周末,请看代码: 4 5 $("#datepicker").datepicker({ 6beforeShowDay: $.datepicker.noWeekends 7}); 8 9如果要禁用某些特定的日期,可定义一个函数实现,如下: 1011 natDays = [ 12 [7, 23,2009], [7, 24,2009], [8, 13,2009], [8, 14,2009], 13]; 1415function nationalDays(date) { 16for (i = 0; i < natDays.length; i++) { 17if (date.getFullYear() == natDays[i][2] && date.getMonth() == natDays[i][0] - 118 && date.getDate() == natDays[i][1]) { 19return [false, natDays[i][2] + ‘_day‘]; 20} 21} 22return [true, ‘‘]; 23} 2425 $("#datepicker").datepicker({ 26beforeShowDay: nationalDays 27}); 2829上面函数的返回值是以个数组,第一个布尔值表示是否禁用该日期,true为不禁用,false为禁用。第二个参数是以个样式名,可自定义被禁用时的样式。 3031如果只要求某个时间段的日期可以选择,通过设置两个参数可以实现: 3233 $("#datepicker").datepicker({ 34 minDate: new Date(2009, 6, 6), 35 maxDate: new Date(2009, 7, 14), 36}); 3738 以上设置表示在2009年5月6号到2009年6月14号是可选的。
现在考虑我自己的应用,我现在要做淡旺季的价格表,如果选择旺季,日期就不能选择非旺季的日期,淡季和平季也是如此。
这样乍看起来需要界定一个日期范围,但是研究楼上的源代码后看到,只需要限定月份就行了。因为每个淡旺季的开头和结尾都是以自然月的1号和30号(31,28号)为结束的,所以数组那里只需要一个值,而不需要三个值来判断。对于一般的应用,最多也是需要两个,也就是日期和月份,年份几乎每年都一样。
另外一个变通点,起始日期的选择。如果旺季开始于7月,当前日期是5月,那么日历的起始日期应该是7月1日。如果当前日期正好处于旺季,那么就从当天开始作为日期的起始点。
第三,我必须要从一个隐藏元素中获取当前的季节特征,淡季,平季还是旺季,不同的季节有不同的价格。那么因为各个浏览器对于浏览器加载元素的时机不同,所以决定放在jquery的$(function(){});里面。
于是就有了如下的js
1 var d=new Date(); 2var y=d.getFullYear(); 3var m=d.getMonth()+1; 4var day=d.getDate(); 5 6 7function nationalDays(date) { 8for (i = 0; i < natDays.length; i++) { 9if (date.getMonth() == natDays[i][0] - 1) { 10return [false, natDays[i][0] + ‘_day‘]; 11 } 12 } 13return [true, ‘‘]; 14} 1516$(function(){ 17var season=document.getElementById(‘season‘).value; 18if(season==‘busy‘){ 19 document.getElementById(‘seasonTips‘).innerHTML=‘旺季的月份选择只能是4月5月9月10月11月‘20if(m>1 && m<4){ 21 mindate=y+‘-4-1‘; 22 }elseif(m>5&&m<9){ 23 mindate=y+‘-9-1‘; 24 }elseif(m>11){ 25 mindate=y+1+‘-4-1‘; 26 }else{ 27 mindate=y+‘-‘+m+‘-‘+day; 28 } 29//旺季4,5,9,10,1130 natDays=[[1],[2],[3],[6], [7], [8],[12],]; 31 }elseif(season==‘common‘){ 32 document.getElementById(‘seasonTips‘).innerHTML=‘平季的月份选择只能是3月6月7月8月‘; 33if(m<3){ 34 mindate=y+‘-3-1‘; 35 }elseif(m>3 && m<6){ 36 mindate=y+‘-6-1‘; 37 }elseif(m>8){ 38 mindate=y+1+‘-3-1‘39 }else{ 40 mindate=y+‘-‘+m+‘-‘+day; 41 } 42//平367843 natDays=[[1],[2],[4],[5],[9],[10],[11],[12],]; 44 }elseif(season==‘dull‘){ 45 document.getElementById(‘seasonTips‘).innerHTML=‘淡季的月份选择只能是1月2月和12月‘; 46if(m>2 && m<12){ 47 mindate=y+‘-12-1‘; 48 }else{ 49 mindate=y+‘-‘+m+‘-‘+day; 50 } 51//淡季12.1.2,禁用34567891052 natDays=[[3],[4],[5],[6],[7],[8],[9],[10],[11],]; 53 } 54// Datepicker55 $(‘.Wdate‘).datepicker({ 56 numberOfMonths:2, 57 showButtonPanel:false, 58 dateFormat: ‘yy-mm-dd‘, 59 minDate: mindate, 60 beforeShowDay: nationalDays, 61 }); 62 });
原文:http://www.cnblogs.com/xingmeng/p/4353997.html
内容总结
以上是互联网集市为您收集整理的Jquery UI的日历控件datepicker限制日期(转)全部内容,希望文章能够帮你解决Jquery UI的日历控件datepicker限制日期(转)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。