📆

【JS】DateRangePickerの使い方⌇カレンダー常時表示

2022/10/19に公開約1,100字

カレンダーを表示して範囲を指定したいと悩んでいた時に出会ったDateRangePickerの使い方を紹介します。

読み込むもの

DateRangePicker

  • daterangepicker.js
  • daterangepicker.css

「Download ZIP」からダウンロードして読み込みました。

Moment.js

  • moment.js

こちらはダウンロードっぽいボタンをクリックするとずらっとコードが表示されたので
自身でmoment.jsファイルを作成しコピペにて対応しました。

※Moment.jsの読み込みを失念しており上手くいかんなぁと悩みました。笑

ライブラリ読み込み

<link rel="stylesheet" type="text/css" href="/css/daterangepicker.css"/>
<script type="text/javascript" src="/js/lib/moment.js"></script>
<script type="text/javascript" src="/js/lib/daterangepicker.js"></script>

カレンダーの表示

表示部分はこちらを参考に記載すると上手くいきました!!

カレンダーの常時表示

カレンダーを常に表示しておけるように埋め込んだ形のものを作りたい場合は、
こちらのサイトのHTMLのスクリプトを読み込むことで表示することができます。

なかなか探し出すのが大変で見つけた時は感動しました。

🔍daterangepicker inline と調べると見つけたすことができました。

困った時は、英語で調べてみるのが良さそうです。

参考サイト

DateRangePickerについて日本語で書かれている記事が本当に少なくて、
こちらの参考記事はめちゃくちゃありがたかったです✨

Discussion

ログインするとコメントできます