jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2016年4月21日
この記事は掲載から370日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

セットアップ

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

 

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

サンプル

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

 

曜日等を日本語化する

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

サンプル

 

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

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

サンプル

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

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

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

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

 

開始日を日付で指定する

サンプル

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

 

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

サンプル

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

 

終了日を日付で指定

サンプル

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

 

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

サンプル

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

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

nx = nx+2; 

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

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

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

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

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

 

特定の日を選択させない

サンプル

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

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

 

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP