t1m0n / air-datepicker

Lightweight, dependency-free JavaScript datepicker.
https://air-datepicker.com
MIT License
2.67k stars 1.37k forks source link

Возможность замены верстки таймпикера без модификации datepickerTime.js #628

Open AndrewBavyka opened 3 months ago

AndrewBavyka commented 3 months ago

Здравствуйте!

Подскажите, пожалуйста, есть ли возможность заменить верстку таймпикера на собственный вариант? Я ознакомился с кодом datepickerTime.js и заметил, что верстка реализована с использованием input type="range", что не совсем подходит для наших нужд.

Есть ли какой-то способ изменить верстку, не внося изменений в datepickerTime.js?

datepickerTime.js

 buildHtml() {
        let {
            ampm, hours, displayHours, minutes, minHours, minMinutes, maxHours, maxMinutes, dayPeriod,
            opts: {hoursStep, minutesStep}
        } = this;

        this.$el.innerHTML = '' +
            '<div class="air-datepicker-time--current">' +
            `   <span class="air-datepicker-time--current-hours">${getLeadingZeroNum(displayHours)}</span>` +
            '   <span class="air-datepicker-time--current-colon">:</span>' +
            `   <span class="air-datepicker-time--current-minutes">${getLeadingZeroNum(minutes)}</span>` +
            `   ${ampm ? `<span class='air-datepicker-time--current-ampm'>${dayPeriod}</span>` : ''}` +
            '</div>' +
            '<div class="air-datepicker-time--sliders">' +
            '   <div class="air-datepicker-time--row">' +
            // eslint-disable-next-line max-len
            `      <input type="range" name="hours" value="${hours}" min="${minHours}" max="${maxHours}" step="${hoursStep}"/>` +
            '   </div>' +
            '   <div class="air-datepicker-time--row">' +
            // eslint-disable-next-line max-len
            `      <input type="range" name="minutes" value="${minutes}" min="${minMinutes}" max="${maxMinutes}" step="${minutesStep}"/>` +
            '   </div>' +
            '</div>';
    }
t1m0n commented 2 months ago

Добрый день! В текущей версии нормально сделать не получится к сожалению, в будущем постараюсь найти место для кастомных элементов

AndrewBavyka commented 2 months ago

Добрый день! В текущей версии нормально сделать не получится к сожалению, в будущем постараюсь найти место для кастомных элементов

Благодарю за обратную связь! 😊

Надеюсь, такая возможность в дальнейшем появится, так как мы планировали использовать ваш datepicker в нашем open-source UI Kit на базе технологии Web Components с использованием Shadow DOM. Однако мы столкнулись с проблемой дизайна выбора времени, в то время как выбор дат идеально соответствовал нашей дизайн-системе.