flatpickrで、disable(選択不可)してる特定の曜日で指定の曜日だけをenable(選択可能)にしたい場合

Question

flatpickrという日付け選択ライブラリを使っているのですが、

現時点でdisableしてる状態
・毎週水曜日
・特定の日付　例：disable: ['2019-07-19','2019-07-18','2019-07-16',]

やりたいことは、水曜日の一部だけはenable(選択可能)にしたいです。

やった事として、

enable: ['2019-11-20','2020-01-01',],

を追加したら指定した上記の日付のみが有効化されてそれ以外が無効化になってしまって困ってる状態です。

  function hook_flatpickr_script() {
    $output = "<script>
                jQuery(function($) {
                      function getMinDate(later){
                        var today = new Date();
                        today.setDate(today.getDate() + later);
                        var year = today.getFullYear();
                        var month = today.getMonth() + 1;
                        var day = today.getDate();
                        return yyyymmdd(year, month, day);
                      }

                      // 日付フォーマット
                      function yyyymmdd(y, m, d) {
                        var y0 = ('0000' + y).slice(-4);
                        var m0 = ('00' + m).slice(-2);
                        var d0 = ('00' + d).slice(-2);
                        return y0+'-'+m0+'-'+d0;
                      }

                      var minDate = getMinDate(3);
                      var config = {
                        minDate: minDate,
                        // enable: [
                        //   '2019-11-20',
                        //   '2020-01-01',
                        // ],
                        disable: [
                          '2019-07-19',
                          '2019-12-23',
                          '2019-12-24',
                          {
                            from: '2016-09-11',
                            to: '2016-10-10'
                          },
                          function(currentDate) {
                            return (currentDate.getDay() === 3);
                          }
                        ],
                        locale: {
                          firstDayOfWeek: 0,
                          weekdays: {
                            shorthand: ['日', '月', '火', '水', '木', '金', '土'],
                          },
                          months: {
                            longhand: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                          },
                        },
                      };
                      $('.flatpickr').flatpickr(config);
                })
                </script>
                <style>
                  .flatpickr-day.disabled, .flatpickr-day.disabled:hover {
                    color: rgba(255, 0, 0, 0.5);
                  }
                </style>";
  }

Answer 1

config をオブジェクトリテラルで一気に書かずに javascript で動的に構築することもできそうですね。

例えば、こんな感じです

var config = {};

// ここを動的に生成しちゃう
config.disable = [
  /* omitted */
]
config.disable.push({
  from: '2016-09-11',
  to: '2016-10-10'
})
config.disable.push(function(currentDate){
  /* omitted */
})

config.locale = {
  /* omitted */
}

$('.flatpickr').flatpickr(config);

こちらのご質問 にあるような時間計算の方法を応用して、disabled に含める値を動的に生成しちゃうのはどうでしょうか？

Comments

[nagashima_naoya]

ありがとうございます！！
参考になりました！

[nagashima_naoya]

ありがとうございます！
とても参考になりました！