javascript - Flatpickr 即时更改 minDate maxDate

标签 javascript flatpickr

您好,我正在尝试用 flatpickr 替换 datetimepicker,但我无法处理这种情况。 不想使用 flatpickr 的范围插件,我希望能够使用 onChange 事件更改实例的 minDate 或 maxDate。 不幸的是,我在指南上找不到关于这段话的信息

 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
    },
  });

我尝试使用 $('#start_time')[0]._flatpickr.config._maxDate 但没有成功

谢谢;)

最佳答案

这样解决

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);
    },
  });

关于javascript - Flatpickr 即时更改 minDate maxDate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50445766/

相关文章:

javascript - 在滚动时设置 CSS 闪烁的 AngularJS 指令

php - 如何动态更改 jquery ui slider 的最小值、最大值?

javascript - 在 IE9 上,Win 7 window.open() 返回 null 而不是打开窗口的引用

Angular Flatpickr 将最后选择的日期绑定(bind)到模型而不是当前选择的日期

javascript - flatpickr 实例无法打开

javascript - 将 draw.io 图渲染为 png

javascript - 使选择组件多选下拉列表保持打开状态

javascript - Flatpickr onDayCreate 添加类

javascript - Puppeteer 和 JSHandle@node aria-label 如何操作?

javascript - 使用 flatpickr 设置 minDate 变量