jQueryデートピッカーの使い方を少しまとめました

システム案件を書いているとjQuery.datepickerを使うケースが割と多いのですが、だからと言って毎日書く訳でもないので忘れがちです。自宅サーバーに自分用虎の巻を登録するプログラムがあるのですが、ごちゃ～としているので少し纏めてみました。

セットアップ

<link type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

CSSとjavascriptはGoogleからロードすると簡単です。ただ、業務案件の場合はクライアントのサーバーに置いてロードしています。Googleが落ちる事は無いと思いますが、外部サーバーに依存する怖さも有りますので。

一番単純なデートピッカー

サンプル

$(function() {
  $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});

日付フォーマットが入っていますので一番単純って訳でも有りませんが、こんな感じです。

曜日等を日本語化する

昔は確か自分でローカライズしていたような気がするのですが、読み込むjavascriptを１つ増やす事で簡単に日本語化できるようです。

サンプル

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});

デートピッカーの開始日を指定する

カレンダーから日付を選択する上で、過去を選択するケースはそう多くないと思います。誕生日等はセレクトボックスの方が楽ですし。

サンプル

開始日を今日以降にしたい

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker1').datepicker({ 
    dateFormat: 'yy-mm-dd',
    minDate: new Date()
  });
});

開始日はminDateで指定します。今日の場合はnew Date()で。

開始日を今日＋○日後で指定する

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker2').datepicker({ 
    dateFormat: 'yy-mm-dd',
    minDate: '+1d'
  });
});

minDate: ‘+1d’とすると明日以降になります。+2,+3…..と加算したい日に応じて設定します。

開始日を日付で指定する

サンプル

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker').datepicker({ 
    dateFormat: 'yy-mm-dd',
    minDate: new Date(2016, 8 - 1, 5) 
  });
});

minDateに対して直で開始日を指定します。サンプルの場合は2016年8月5日が開始日になるのですが、minDateに指定する月は8-1として1引いてあげます。理由は検索すると解るはずですので、ここでは触れません。

終了日を今日から～○日後で指定

サンプル

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker').datepicker({ 
    dateFormat: 'yy-mm-dd',
    minDate: new Date(),
    maxDate: '+5d'
  });
});

開始日の指定が出来るなら終了日も当然有り、maxDateで指定します。サンプルは今日を含めて6日間だけしか選択出来ません。あまり利用シーンが思い浮かびませんが、クライアントからそう指定された事があったので。

終了日を日付で指定

サンプル

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker').datepicker({ 
    dateFormat: 'yy-mm-dd',
    maxDate: new Date(2016, 5-1, 5) 
  });
});

これは割と使うケースが多い思います。タイトル通り終了日を日付で指定します。開始日と同様、月はマイナス1して指定します。

ふたつ目のデートピッカーの日付を一つ目の選択日に応じて変更する

サンプル

$(function() {
  var nx = 0
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker1').datepicker({ 
    dateFormat: 'yy-mm-dd',
    minDate: new Date(),
    onSelect: function(selectedDate) {
      var today   = new Date();
      var selDate = new Date(selectedDate);
      var msDiff = selDate.getTime() - today.getTime();
      nx = Math.floor(msDiff / (1000 * 60 * 60 *24));
      nx = nx+2;
      var min = '+'+nx+'d';
      $("#datepicker2").datepicker("option", "minDate", min);
    }
  });
  $('#datepicker2').datepicker({ 
    dateFormat: 'yy-mm-dd' 
  });
});

予約システムやレンタル関連などでデートピッカーを2枚使う事が有ります。レンタル開始日とレンタル終了日といった使い方ですね。終了日は当然ですが、今日以降～の日付としたいので、過去を選ばれたく有りません。

サンプルは1枚目のデートピッカーで選択した日付＋2日後が2枚めのデートピッカーの開始日となります。

nx = nx+2;　

この部分を変更する事で、1日後や2日後や3日後…となります。

2枚めを先に選択した場合はどうなるか？というと、選択順を逆にしてもちゃんと2日後に日付が変更されます。

但し、onSelectは1枚目のデートピッカーを選択した後に処理されますので、1枚目を選択してページをリロード(F5)したときに日付が残ってしまうと、2枚目は過去でも未来でも自由に選択出来てしまいます。

対処としてはフォームに対してautocomplete=”off”を指定する方法が有ります。

<form method="post" autocomplete="off">

あと、ページをロードした時にデートピッカーのvalueを空にしたり、2枚めをdisabledにして1枚目のonSelectで解除など。

特定の日を選択させない

サンプル

$(function() {
  $.datepicker.setDefaults($.datepicker.regional['ja']);
  $('#datepicker').datepicker({ 
    dateFormat: 'yy-mm-dd',
    onSelect: function(selectedDate) {
      var holidays = [ '2016-05-13', '2016-04-25', '2016-08-15' ];
      for(var i=0; i<holidays.length; i++){
        if(holidays[i] == selectedDate){
          $(this).val('');
          $(this).after('選択出来ない日です');
        }
      }
    }
  });
});

この方法はデートピッカーの機能ではなく、選択した日がholidaysの配列にある場合はvalueを空にする処理をしているだけです。指定日をデートピッカー上で選択出来なくする方法も有りますが、ちょっと面倒だった記憶が有ります。

私がどうしてもそういう仕様が欲しいときは自作したデートピッカーを使うので、jQueryデートピッカーで実装したい場合は検索してみて下さい。どっかで見た記憶があるので多分あると思います。

jQueryデートピッカーのデザイン等も変更出来ますし、もっと色々な機能が有りますが、ここで紹介した程度を覚えておけばたいがいは対応出来るんじゃないかと思います。