jQueryとMoment.jsを使用したDate Range Pickerの実装方法

まず、以下の手順に従って必要なリソースを準備します。

jQueryとMoment.jsのCDNリンクをHTMLファイルに追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Date Range Pickerのライブラリをダウンロードし、プロジェクトに追加します。一般的なライブラリには、"daterangepicker.js"と"daterangepicker.css"のファイルが含まれています。

次に、以下のコード例を使用してDate Range Pickerを実装します。

<input type="text" id="dateRangePickerInput" />
<script>
$(document).ready(function() {
  $('#dateRangePickerInput').daterangepicker({
    startDate: moment().startOf('month'),
    endDate: moment().endOf('month'),
    locale: {
      format: 'YYYY-MM-DD',
      separator: ' ~ ',
      applyLabel: '適用',
      cancelLabel: 'キャンセル',
      fromLabel: '開始日',
      toLabel: '終了日',
      customRangeLabel: 'カスタム範囲',
      weekLabel: 'W',
      daysOfWeek: ['日', '月', '火', '水', '木', '金', '土'],
      monthNames: [
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ],
      firstDay: 1
    }
  });
});
</script>

上記のコードでは、#dateRangePickerInputというIDを持つテキスト入力フィールドをDate Range Pickerとして初期化しています。startDateとendDateオプションには、選択可能な日付範囲の初期値を設定することができます。

また、localeオプションを使用して、Date Range Pickerのローカライズ設定をカスタマイズすることもできます。

これで、jQueryとMoment.jsを使用してDate Range Pickerを実装する方法がわかりました。このコード例を参考にして、自分のプロジェクトに適合するようにカスタマイズしてください。