Flatpickr change minDate maxDate on the fly

[crivotz]

Hi I'm trying to replace the datetimepicker with flatpickr but I can't handle this situation. Not wishing to use the Range plugin of flatpickr I would like to be able to change the minDate or maxDate of an instance using the onChange event. Unfortunately I found little information about this passage on the guides

 flatpickr('#start_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: '',
        showAlways: true,
      }),
    ],
    showAlways: false,
    theme: 'airbnb',
    time_24hr: true,
    altInput: true,
    altFormat: 'F j, Y H:i',
    dateFormat: 'Z',
    weekNumbers: true,
    maxDate: $('#end_time').attr('value'),
    onClose: function(selectedDates, dateStr, instance) {
    // Change #end_time minDate
    },
  });

  flatpickr('#end_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: '',
        showAlways: true,
      }),
    ],
    showAlways: false,
    theme: 'airbnb',
    time_24hr: true,
    altInput: true,
    altFormat: 'F j, Y H:i',
    dateFormat: 'Z',
    weekNumbers: true,
    minDate: $('#start_time').attr('value'),
    onClose: function(selectedDates, dateStr, instance) {
    // Change #start_time maxDate
    },
  });

I tried to play with $('#start_time')[0]._flatpickr.config._maxDate = Date() it's work but there is no auto refresh of the element

Thanks ;)

• flatpickr version used: 4.5
• Browser name and version: Chrome
• OS and version: Debian 9

[adrienpoly]

Hello

You should store the instance of Flatpickr somewhere and then use the set(option, value) method. This will correctly update and redraw the picker. Don't use _ methods there are meant to be private.

Here is an example I used some time ago, It was in the Stimulus framework, but I think you can easily extract the logic out of it.

import { Controller } from "stimulus";
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.css";

export default class extends Controller {
  static targets = ["start", "end"];

  connect() {
    this.startPicker = flatpickr(this.startTarget, {
      onClose: this.closeStart.bind(this)
    });

    this.endPicker = flatpickr(this.endTarget, {
      onClose: this.closeEnd.bind(this)
    });
  }

  closeStart(selectedDates, dateStr, instance) {
    this.endPicker.set("minDate", dateStr);
  }

  closeEnd(selectedDates, dateStr, instance) {
    this.startPicker.set("maxDate", dateStr);
  }
}

[crivotz]

Thanks I solved in this way

  let startpicker = flatpickr('#start_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: '',
        showAlways: true,
      }),
    ],
    showAlways: false,
    theme: 'airbnb',
    time_24hr: true,
    altInput: true,
    altFormat: 'F j, Y H:i',
    dateFormat: 'Z',
    weekNumbers: true,
    maxDate: $('#end_time').attr('value'),
    onClose: function(selectedDates, dateStr, instance) {
      endpicker.set('minDate', dateStr);
    },
  });

  let endpicker = flatpickr('#end_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: '',
        showAlways: true,
      }),
    ],
    showAlways: false,
    theme: 'airbnb',
    time_24hr: true,
    altInput: true,
    altFormat: 'F j, Y H:i',
    dateFormat: 'Z',
    weekNumbers: true,
    minDate: $('#start_time').attr('value'),
    onClose: function(selectedDates, dateStr, instance) {
      startpicker.set('maxDate', dateStr);
    },
  });