Выбор периода в рамках одного календаря. Библиотека flatpickr

Привет, покажу пример, как реализовать выбор периода в рамках одного календаря, при помощи библиотеки flatpickr.

Все подробности в видео, а ниже используемый код.


Разметка из виджета код и подключение стилей библиотеки:

HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<elma-form-row class="elma-form-row">
    <elma-form-control class="elma-form-control text-base" style="max-width: 200px;">
        <input id="myDatePicker" type="text" placeholder="Выберите дату">
    </elma-form-control>
</elma-form-row>

Функции из вкладки скрипты:

Код:

import flatpickr from 'flatpickr.js'
import { Russian } from "ru.js"

declare const console:any, window: any, document: any
/** функция окончания отрисовки */
async function endInit(): Promise<void> {
    if (flatpickr) {
        flatpickr("#myDatePicker", {
            //формат даты
            dateFormat: "d.m.Y",
            //без выбора времени
            enableTime: false,
            //мод для периода
            mode: "range",
            //локализация
            locale: Russian,
            //ивент при изменении значения
            onChange: async (dates: Date[]) => {
                Context.data.start_date = new TDate(dates[0].getFullYear(), dates[0].getMonth() + 1, dates[0].getDate())
                Context.data.end_date = dates[1] ? new TDate(dates[1].getFullYear(), dates[1].getMonth() + 1, dates[1].getDate()) : undefined
                await calcAmountDays()
            }
        });
    }
}
/** Функция уничтожения */
async function destroy(): Promise<void> {
    //убираем из разметки страницы календарик, предотвращение конфликтов
    document.querySelector('.flatpickr-calendar')?.remove()
}

/** расчет кол-ва дней отпуска */
async function calcAmountDays(): Promise<void> {
    if (Context.data.start_date && Context.data.end_date) {
        Context.data.amount_days = ((Context.data.end_date.asDatetime(new TTime(12, 0, 0, 0)).unix() - Context.data.start_date.asDatetime(new TTime(12, 0, 0, 0)).unix()) / 86400) + 1
    } else {
        Context.data.amount_days = 0
    }
}

Еще больше полезной информации в ТГ канале WhatDaELMA365