Jquery UI的日曆控制元件datepicker限制日期
阿新 • • 發佈:2019-02-15
現在jquery用的很廣泛,一方面是其強大的庫,另一方面是它的外掛很豐富。最近用了jquery的datepicker外掛,感覺很棒,介面很漂亮,功能齊全,且擴充套件性很好。強烈推薦使用。 專案中有一個需求,要禁用某些日期,比如週末,節假日。看了datepicker的原始碼,發現裡面有一個noWeekends方法可非常簡單地實現禁用週末,請看程式碼: $("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends }); 如果要禁用某些特定的日期,可定義一個函式實現,如下: natDays = [ [7, 23,2009], [7, 24,2009], [8, 13,2009], [8, 14,2009], ]; function nationalDays(date) { for (i = 0; i < natDays.length; i++) { if (date.getFullYear() == natDays[i][2] && date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { return [false, natDays[i][2] + '_day']; } } return [true, '']; } $("#datepicker").datepicker({ beforeShowDay: nationalDays }); 上面函式的返回值是以個數組,第一個布林值表示是否禁用該日期,true為不禁用,false為禁用。第二個引數是以個樣式名,可自定義被禁用時的樣式。 如果只要求某個時間段的日期可以選擇,通過設定兩個引數可以實現: $("#datepicker").datepicker({ minDate: new Date(2009, 6, 6), maxDate: new Date(2009, 7, 14), }); 以上設定表示在2009年5月6號到2009年6月14號是可選的。
現在考慮我自己的應用,我現在要做淡旺季的價格表,如果選擇旺季,日期就不能選擇非旺季的日期,淡季和平季也是如此。
這樣乍看起來需要界定一個日期範圍,但是研究樓上的原始碼後看到,只需要限定月份就行了。因為每個淡旺季的開頭和結尾都是以自然月的1號和30號(31,28號)為結束的,所以陣列那裡只需要一個值,而不需要三個值來判斷。對於一般的應用,最多也是需要兩個,也就是日期和月份,年份幾乎每年都一樣。
另外一個變通點,起始日期的選擇。如果旺季開始於7月,當前日期是5月,那麼日曆的起始日期應該是7月1日。如果當前日期正好處於旺季,那麼就從當天開始作為日期的起始點。
第三,我必須要從一個隱藏元素中獲取當前的季節特徵,淡季,平季還是旺季,不同的季節有不同的價格。那麼因為各個瀏覽器對於瀏覽器載入元素的時機不同,所以決定放在jquery的$(function(){});裡面。
於是就有了如下的js
var d=new Date(); var y=d.getFullYear(); var m=d.getMonth()+1; var day=d.getDate(); function nationalDays(date) { for (i = 0; i < natDays.length; i++) { if (date.getMonth() == natDays[i][0] - 1) { return [false, natDays[i][0] + '_day']; } } return [true, '']; } $(function(){ var season=document.getElementById('season').value; if(season=='busy'){ document.getElementById('seasonTips').innerHTML='旺季的月份選擇只能是4月5月9月10月11月' if(m>1 && m<4){ mindate=y+'-4-1'; }else if(m>5&&m<9){ mindate=y+'-9-1'; }else if(m>11){ mindate=y+1+'-4-1'; }else{ mindate=y+'-'+m+'-'+day; } //旺季4,5,9,10,11 natDays=[[1],[2],[3],[6], [7], [8],[12],]; }else if(season=='common'){ document.getElementById('seasonTips').innerHTML='平季的月份選擇只能是3月6月7月8月'; if(m<3){ mindate=y+'-3-1'; }else if(m>3 && m<6){ mindate=y+'-6-1'; }else if(m>8){ mindate=y+1+'-3-1' }else{ mindate=y+'-'+m+'-'+day; } //平3678 natDays=[[1],[2],[4],[5],[9],[10],[11],[12],]; }else if(season=='dull'){ document.getElementById('seasonTips').innerHTML='淡季的月份選擇只能是1月2月和12月'; if(m>2 && m<12){ mindate=y+'-12-1'; }else{ mindate=y+'-'+m+'-'+day; } //淡季12.1.2,禁用345678910 natDays=[[3],[4],[5],[6],[7],[8],[9],[10],[11],]; } // Datepicker $('.Wdate').datepicker({ numberOfMonths:2, showButtonPanel:false, dateFormat: 'yy-mm-dd', minDate: mindate, beforeShowDay: nationalDays, }); });