Home>

I use a date picking library called flatpickr

Current disabled state
・ Every Wednesday
-Specific date Example: disable: ['2019-07-19', '2019-07-18', '2019-07-16',]

What I want to do is to enable only a part of Wednesday.

As you did,

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


If i add, only the above specified date is enabled and the others are disabled.

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);
                      }
                      // date format
                      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: ['day', 'moon', 'fire', 'water', 'tree', 'gold', 'sat'],
                          },
                          months: {
                            longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', '10 'Month', 'November', 'December'],
                          },
                        },
                      };
                      $('. flatpickr'). flatpickr (config);
                })
                </script>
                <style>
                  .flatpickr-day.disabled, .flatpickr-day.disabled: hover {
                    color: rgba (255, 0, 0, 0.5);
                  }
                </style>";
  }
  • Answer # 1

    It seems that

    configcan be dynamically built with javascript without writing object literals all at once.

    For example, it looks like this

    var config = {};
    // create this dynamically
    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);

    How about using the time calculation method in this question to dynamically generate a value to be included in disabled?

Related articles