Jаvascript: Datepicker - Легкий доступный компонент календаря
DateDreamer — это простой, легкий и доступный компонент для выбора даты и календаря, написанный на ванильном jаvascript.
Как это использовать:
1. Установите или импортируйте DateDreamer.
# Yarn
$ yarn add datedreamer
# NPM
$ npm i datedreamer
import * as datedreamer from "datedreamer";
Подключение к HTML странице
<script src="./dist/datedreamer.js"></script>
2. Отображение встроенного календаря на странице.
<div id="calendar"></div>
3. Инициализация DateDreamer
new datedreamer.calendar({
element: "#calendar",
})
4. Инициализируйте DateDreamer как средство выбора даты с полем ввода.
new datedreamer.calendarToggle({
element: "#calendar",
})
5. Доступные параметры для настройки календаря.
new datedreamer.calendar({
// Выбор даты при инициализации
selectedDate: "02/15/2023",
// Формат даты
format: "MM/DD/YYYY",
// пользовательские иконки для "следующий/предыдущий"
iconNext: '>',
iconPrev: '<',
// установить метку ввода даты
inputLabel: 'Назначить дату',
// установить placeholder для ввода даты
inputPlaceholder: 'Введите дату',
// скрыть кнопку ввода и сегодня
hideInputs: false, // true
// включить темный режим
darkMode: false, // true
// или 'lite-purple'
theme: 'unstyled',
// пользовательские стили
styles: `
button {
color: blue
}
`,
// вызов
onchange: (e) => {
console.log(e.detail);
},
onRender: (e) => {
console.log(e.detail.calendar);
},
})
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.