Flatpickr.js-多个时间范围

时间:2019-11-23 15:14:02

标签: javascript flatpickr

我正在尝试设置“通用”控制器/受控时间范围。我尝试过-https://jsfiddle.net/pamare/ekw30c27/就是这样-https://jsfiddle.net/pamare/ekw30c27/10

部分正常。完成第一个输入后,第二个具有第一个的开始时间(最好有+1小时,但并不重要)。

要点是,在那之后什么都没用-我的意思是控制时间。有什么帮助吗?我下面的部分代码。

function loadDatePickr() {
if (document.querySelectorAll('.date-pickr input').length > 0) {
    var pickrs = document.querySelectorAll('.date-pickr');
    var dayInMiliseconds = 1000 * 3600 * 24;

    var pickrSetUp = [];
    for (let index = 0; index < pickrs.length; index++) {
        const element = pickrs[index];
        const input = element.querySelector('input');

        var minTime = '7:00';
        var maxTime = '19:00';

        if (element.classList.contains('only-time')) {
            var options = {
                dateFormat: 'H:i',
                enableTime: true,
                minTime: minTime,
                maxTime: maxTime,
                time_24hr: true,
                noCalendar: true
            };
        } else if (element.classList.contains('only-date')) {
            var options = {
                enable: [
                    {
                        from: new Date(Date.now() + dayInMiliseconds * 1),
                        to: new Date(Date.now() + dayInMiliseconds * 15)
                    }
                ],
                dateFormat: 'd. m. Y',
                locale: {
                    firstDayOfWeek: 1
                }
            };
        } else {
            var options = {
                enable: [
                    {
                        from: new Date(Date.now() + dayInMiliseconds * 1),
                        to: new Date(Date.now() + dayInMiliseconds * 15)
                    }
                ],
                dateFormat: 'd. m. Y H:i',
                enableTime: true,
                minTime: minTime,
                maxTime: maxTime,
                locale: {
                    firstDayOfWeek: 1
                },
                time_24hr: true
            };
        }

        pickrSetUp[index] = flatpickr(input, options);

        if (element.classList.contains('controlled') && element.classList.contains('only-time')) {
            var prevIndex = index - 1;

            pickrSetUp[prevIndex].config.onClose = [
                () => {
                    setTimeout(() => pickrSetUp[index].open(), 1);
                }
            ];

            pickrSetUp[prevIndex].config.onChange = [
                selDates => {
                    pickrSetUp[index].set('minDate', selDates[0]);
                }
            ];

            pickrSetUp[index].config.onChange = [
                selDates => {
                    console.log(prevIndex);
                    pickrSetUp[prevIndex].set('maxDate', selDates[0]);
                }
            ];
        }
    }
}
}

0 个答案:

没有答案