|||||||||||||||||||||

なんぶ電子

- 更新: 

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

bootstrap-datepicker

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

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

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

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

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で使いたい場合は次のアドレスを用います。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

bootstrap-datepickerの基本的な使い方

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

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

  1. bootstrap-datepicker.min.js

    jsフォルダの中にある本体です。

  2. bootstrap-datepicker3.css

    cssフォルダの中にあるcssです。

  3. 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が崩れてしまうので別ウインドウで開きます。

筆者紹介


自分の写真
がーふぁ、とか、ふぃんてっく、とか世の中すっかりハイテクになってしまいました。プログラムのコーディングに触れることもある筆者ですが、自分の作業は硯と筆で文字をかいているみたいな古臭いものだと思っています。 今やこんな風にブログを書くことすらAIにとって代わられそうなほど技術は進んでいます。 生活やビジネスでPCを活用しようとするとき、そんな第一線の技術と比べてしまうとやる気が失せてしまいがちですが、おいしいお惣菜をネットで注文できる時代でも、手作りの味はすたれていません。 提示されたもの(アプリ)に自分を合わせるのでなく、自分の活動にあったアプリを作る。それがPC活用の基本なんじゃなかと思います。 そんな意見に同調していただける方向けにLinuxのDebianOSをはじめとした基本無料のアプリの使い方を紹介できたらなと考えています。

広告