Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AndrewBavyka opened this issue Aug 22, 2024 · 2 comments

Comments

@AndrewBavyka
Copy link

AndrewBavyka commented Aug 22, 2024

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

Подскажите, пожалуйста, есть ли возможность заменить верстку таймпикера на собственный вариант?
Я ознакомился с кодом 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
Copy link
Owner

t1m0n commented Sep 12, 2024

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

@AndrewBavyka
Copy link
Author

AndrewBavyka commented Sep 18, 2024

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants