年月だけの選択も可能なdatepicker

いままで筆者はjQuery MobileとJTSage DateBoxを利用して、ドラム式で日付や年月の選択のUIを作成していました。

しかし、jQuery MobileがOpenJSにより非推奨となりました。OpenJS Foundationは「主要なJavaScriptおよびWebソリューションと関連テクノロジーの普及と継続的な開発を促進する」ことを目的のひとつとしています。

その財団が8年近く更新のないjQuery Mobileを非推奨と指針を示したのに従い、筆者もその環境をBootstrap5に差し替えることにしました。

それに伴って、今回jQuery Moblieと一緒に非推奨となったjQuery UIに依存しているJTSageのDateBoxの機能の代替を探しました。

2022/12追記

BootstrapやjQueryに依存しないjs-datepickerをカスタマイズして、年月だけの選択を可能にさせたので記事の最後に加えました。

2024/2追記

モダンなブラウザなら、input の type を month にすることで、月単位のピッカーを表示させることができるようです。

bootstrap-datepicker

Bootstrap環境用のDate Pickerを探したところbootstrap-datepickerを見つけました。

求めていたドラム式ではなくカレンダー式のDate Pickerになりますが、設定を変更することでMonth Picker(年月のみの選択)にもできることがわかったのでこれを利用することにしました。

こちらも3年前から更新されていませんが、いいほうにとらえば完成されているということでしょう。また、jQuery本体への依存もあります。jQuery本体は開発が続けられ非推奨とはなっていませんが、BootStap自体がjQueryからの脱却による軽量化を図っていてる中でのjQueryの選択は若干残念です。

Bootstrap

bootstrap-datepickerを利用するためには、BootstrapとjQueryが必要です。

BootstrapはBootstrap ダウンロードページからファイルをダウンロードしてください。展開したフォルダの中のcssサブフォルダに入っているbootstrap.min.cssと、jsサブフォルダ中のbootstrap.bundle.min.jsを読み込めば利用できます。先の日本語のサイトの方はまだ5.0.0-beta1ですが、https://getbootstrap.com/(英語版?)の方には5.1.3が配布されていたので、筆者はバージョン5.1.3を利用しました。

また、CDNも利用可能です。公式ページではjsDeliverがホストとして紹介されていました。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=" crossorigin="anonymous">
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha256-cMPWkL3FzjuaFSfEYESYmjF25hCIL6mfRSPnW8OVvM4=" crossorigin="anonymous"></script>

本家のBootstrap5ではその依存がなくなりましたが、bootstrap-datepickerにはjQueryが必要なので読み込みます。

jQueryもサイトからダウンロードするか、CDNを利用してjquery.min.jsを読み込みます。

ちなみにバージョン3.6をBootstrapと合わせて、jsDeliverで使いたい場合は次のアドレスを用います。

bootstrap-datepickerの基本的な使い方

bootstrap-datepickerのダウンロードは、documentにリンクがあるOnline Demoのページから可能です。

Demoのページで、「Download 1.9.0」(バージョンは執筆時点のものです)をクリックしてダウンロードして展開したファイルの中で今回使うのは次の3つです。

bootstrap-datepicker.min.js
jsフォルダの中にある本体です。
bootstrap-datepicker3.css
cssフォルダの中にあるcssです。
bootstrap-datepicker.ja.min.js
localesフォルダにある日本語化ファイルです。

これらもjsDeliverで配布されています。

<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/locales/bootstrap-datepicker.ja.min.js" integrity="sha256-IX182a23hiQE65+kYOND1ZIX2Vpl0cHb96g9nJqqqW0=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.css" integrity="sha256-AghQEDQh6JXTN1iI/BatwbIHpJRKQcg2lay7DE5U/RQ=" crossorigin="anonymous">

Bootstrap、jQuery、bootstrap-datepickerの環境を整えた状態で次のようにすることで、カレンダー式のDatePickerを設置することができます。

sample.html

...
<input id="datepicker" type="text" />

<script>
  $('#datepicker').datepicker();
</script>
...

こうするとテキストボックスをクリックした際に、英語表記のカレンダーが表示され、日付を選ぶとテキストボックスに挿入されます。

これを日本語にするには、$('#datepicker').datepicker()の引数にオブジェクトで設定をあたます。またデフォルトの状態だと、年月の範囲がありません。西暦2099年や3025年といった値も指定できてしまします。なのでstartDateとendDateを使って日付範囲を制限します。日付範囲にはJavaScriptのDateオブジェクトを渡すほか、'-7d'(7日前)といった値で与えることもできます。さらに、デフォルトだとテキストボックスにセットされる値はYYYY/MM/DD形式となりますが、/ではなく-にしたいといったことがあったらformatの値を渡すことで、設定の変更が可能です。

他、オプションは多彩にあるので、先のbootstrap-datepickerのOnline Demoのページや、Documentを確認してみてくさい。

また、日付範囲を制限する際に便利なmoment.jsに代わる日付ライブラリのDay.jsについても、当ブログで紹介していますので、よかったら読んでみてください。

sample2.html

...
$('#sandbox-container input').datepicker({
  language: "ja",
  startDate: '-5d',
  endDate: new Date(),
  format: "yyyy-mm-dd"
});
...

ちなみに、bootstrap-datepicker.ja.min.jsでもformatを指定している部分があり、language:jaを指定すると読み込まれますので、こちらでもformatを変えることができます。

bootstrap-datepickerをmonth-pickerに

カレンダーによるdate pickerをmonth pickerにつまり、月までの選択に変えます。

変えますといっても設定を変更するだけです。先に設定するオプションの値に、minViewModeとmaxViewModeを追加します。

この値は0:が日付選択、1:が月選択、2:が年選択となります。なので、最小粒度を1:の月にすることで年月だけを選択することができます。選択した際の値も年月までにするためにformatも変えます。あわせて、年より上の粒度は誤操作の原因となるので制限します。

もし選択した際の年月が年月日のままだったら、bootstrap-datepicker.ja.min.jsのfomartの部分も変更してみてください。

sample3.html

...
$('#sandbox-container input').datepicker({
  language: "ja",
  format: "yyyy/mm",
  minViewMode: 1,
　maxViewMode: 2
});
...

z-index

js-datepickerのz-indexはDOM中のz-indexの最大値に10を加えたものになるようですが、筆者の環境でcssにz-indexを指定した要素の後ろ側になってしまうことがありました。その際は、インスタンス作成時に「zIndexOffset」オプションを用いることで、z-indexの値を調整できます。

この値は通常10のオフセットをいくつにするかという値で、例えば100にしたらDOM中のz-indexの最大値に100を加えるという意味になります。

sample4.html

...
$('#sandbox-container input').datepicker({
  language: "ja",
  format: "yyyy/mm/dd DD",
  zIndexOffset: 100
});
...

integrityとcrossorigin(補足)

ちなみにCDN利用時に設定するintegrity属性ですが、これは取得するソースのハッシュでソースの改ざんを検知する為に用いられます。

この値が違っていると次のようなエラーがでます。

blog-preview:1 Subresource Integrity: The resource 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

もうひとつのcrossorigin属性ですが、これはCORS(オリジン間のソース共有)のリクエストを構成するものです。

未設定や設定エラー時を含めてデフォルト設定は「anonymous」になっていて、異なったオリジンに対しクッキーやSSL証明書等のユーザー情報は送信されません。

この値に「use-credentials」を設定すると異なったCORSのために資格情報を利用します。

稼働サンプル

稼働サンプルを用意しました。Bootstrap用のCSSを読み込むと、このページのCSSが崩れてしまうので別ウインドウで開きます。

BootstrapやjQueryに依存しないjs-datepicker

先にも書いたようにjQueryへの依存が少し気になっていたので、それを利用していないdatepickerであるjs-datepickerrをカスタマイズして年月だけの選択を可能にさせました。(js-datepickerはBootstrapにも依存していません)

カスタマイズした後のソースコードはgithubで公開しています。

オリジナルのオプション「monthPicker:ture」を設定する事で年月だけの選択に切り替わります。これを設定しなければ通常のjs-datepickerと同様に使えます。

元々の機能である年月の選択機能(overlay)をフックさせて、年月だけのモードの際は指定月の1日を返して終了させているだけのコードです。

またオリジナルはoverlayでは年月をキー入力で受け付けますが、コード上の都合でその機能をやめ矢印での選択制にしています。

こちらのサンプルファイルはgithubのdistフォルダ内にあります。js,css,htmlの3つのファイルを同階層に置いた状態で.htmlを表示させればサンプルが動くと思います。

git経由でコードをcloneする場合の注意ですが、package.jsonはfoke元のままになっています。

オリジナルのpackage.jsonでは npm run build で実行されるコマンドが「NODE_OPTIONS=--openssl-legacy-provider webpack --mode production --env.prod webpack --mode production --env.prod」に設定されています。

これをWindows環境で実行すると

'NODE_OPTIONS' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

というエラーになります。NODE_OPTIONSはを環境変数として手動でセットすることにして、コマンドをwebpack以降だけにすることで、ビルドができます。

jQuery:	-
Bootstrap(JS):	-
datepicker(JS):	-
datepicker-locale:	-
Bootstrap(CSS):	-
datepicker(CSS):	-

投稿:2021/12/09 - 更新: