Date Range Pickerで空文字を許可する方法

はじめに

こちらのDate Range Pickerは、通常だとinputの値を空文字にすると自動で日付が入ってしまいます。空文字を入力できるようにする方法を調べたので備忘録として残します。

コード

autoUpdateInputのオプションをfalseにすることで自動でinputに値が入らないようにします。
ただし、applyボタンを押しても値が入らなくなるため、apply.daterangepickerのイベントを検知して手動で値を入れる必要があります。

$(function () {
  $('input[name="daterange"]')
    .daterangepicker({
      autoUpdateInput: false,
    })
    .on('apply.daterangepicker', function (_, picker) {
      const startDate = picker.startDate.format('DD/MM/YYYY');
      const endDate = picker.startDate.format('DD/MM/YYYY');

      $(this).val(`${startDate} - ${endDate}`);
    });
});

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。