Easepick Datepicker - 更改特定日期的mindays

Question

我正在为一个项目使用easepick datepicker 。 一切正常，除了一件事：我有一个 4 天的 minday 设置，但现在如果开始日期在特定日期范围内，我想将其设置为 7 天。 这有可能吗？ 我为 minday 设置了一个变量，但它在 LockPlugin 中没有改变。

 const DateTime = easepick.DateTime; /* const bookedDates = [ "02.05.2022", "03.05.2022", "18.05.2022", ]*/ var mindays = 4; bookedDates.map(d => { if (d instanceof Array) { const start = new DateTime(d[0], 'DD.MM.YYYY'); const end = new DateTime(d[1], 'DD.MM.YYYY'); return [start, end]; } return new DateTime(d, 'DD.MM.YYYY'); }); console.log(bookedDates); const picker = new easepick.create({ element: document.getElementById('vondatum'), css: [ 'https://www.driveaway.at/css/index.css', 'https://www.driveaway.at/css/demo_hotelcal.css', ], lang: "de-DE", format: "DD.MM.YYYY", autoApply: true, calendars: 1, zIndex: 10, setup(picker) { picker.on('select', (e) => { var startdate = e.detail.start; var enddate = e.detail.end; //console.log(picker.getDate()); var chkdate = convertDate(startdate); var chkdate = new Date(chkdate); var seasonstart = new Date("2022-06-25"); var seasonend = new Date("2022-09-09"); if(chkdate > seasonstart && chkdate < seasonend){ mindays = 7; } else {mindays = 4;} picker.config calcDate(startdate, enddate); }); }, plugins: ['RangePlugin', 'LockPlugin'], RangePlugin: { tooltipNumber(num) { return num; }, locale: { one: 'Tag', other: 'Tage', }, }, LockPlugin: { minDate: new Date(), minDays: mindays, inseparable: true, filter(date, picked) { if (picked.length === 1) { const incl = date.isBefore(picked[0]) ? '[)' : '(]'; return !picked[0].isSame(date, 'day') && date.inArray(bookedDates, incl); } return date.inArray(bookedDates, '[)'); }, } });

Answer 1

您需要使用preselect事件并更改 LockPlugin 选项。

 const picker = new easepick.create({ element: document.getElementById('datepicker'), css: [ 'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.css', ], plugins: ['RangePlugin', 'LockPlugin'], LockPlugin: { minDays: 2, selectForward: true, }, setup(picker) { const DateTime = easepick.DateTime; const lockPlugin = picker.PluginManager.getInstance('LockPlugin'); picker.on('preselect', (e) => { const { start, end } = e.detail; const a = new DateTime('2022-06-20'); const b = new DateTime('2022-07-13'); if (start && start.isBetween(a, b, '[]')) { lockPlugin.options.minDays = 7; } else { lockPlugin.options.minDays = 2; } // refresh layout picker.renderAll(); }); } });

 <script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.umd.min.js"></script> <input id="datepicker"/>