Posted on by

datepickerで範囲制限をしてみました

 JQueryも動作的に大分安定してきて安心して使えるようになってますが、JQuery-UIもヴァージョンを重ねてだんだんかゆいところに手が届くようになってきています。

Webアプリケーションのカレンダーでdatepickerを使用している方も多いと思いますが、２つのdatepickerを使って開始日と終了日を指定するような場合に、

・終了日は開始日以前の日付を選択できない
・開始日は終了日以降の日付を選択できない

という制限をつけた動きを出来るようにしてみました(^^)

ヘッダでJQuery, JQueryUI, そして日本語ローカライズのdatepickerのファイルを読み込んで、レッツトライ！！



開始日:
   
終了日:

それぞれの入力欄をクリックすると、datepickerが立ち上がります。
範囲制限が分かりやすいように、３か月分表示してあります。
選択不可の範囲が白く表示され、それより前（後）の月を表示しようとしても出来ないと思います。

ソースは読み込み時に以下のように書きます。

view plaincopy to clipboardprint?
  1. <script type="text/javascript">  
  2. $(function(){  
  3. // 開始日と終了日  
  4. // 開始日  
  5. $('#datepicker_s').datepicker({  
  6. maxDate: $('#datepicker_e').val(),  
  7. numberOfMonths: 3,  
  8. showCurrentAtPos: 1,  
  9. stepMonths: 3,  
  10. dateformat: 'yyyy/mm/dd',  
  11. onSelect: function(dateText, inst){  
  12. $('#datepicker_e').datepicker('option', 'minDate', dateText);  
  13. }  
  14. });  
  15. // 終了日  
  16. $('#datepicker_e').datepicker({  
  17. minDate: $('#datepicker_s').val(),  
  18. numberOfMonths: 3,  
  19. showCurrentAtPos: 1,  
  20. stepMonths: 3,  
  21. dateformat: 'yyyy/mm/dd',  
  22. onSelect: function(dateText, inst){  
  23. $('#datepicker_s').datepicker('option', 'maxDate', dateText);  
  24. }  
  25. });  
  26. });  
  27. </script>  

onSelectでユーザに選択された日付をそれぞれ相手のmaxDate,minDateに書き込みます。
注意しないといけないのはページを読み込んだ時点でのmaxDate,minDateの値。
既に値がある場合はロード段階で相手の値を指定してください。