DateTimePicker

Кастомный date/time/month picker на TypeScript для обычных input полей, форм и wrapper-интеграций.

Основная документация и живые примеры находятся в Showcase:

• Документация
• Локальный Showcase

README оставлен как краткая точка входа: установка, быстрый старт, ссылки и релизные команды. Подробные options/events/methods, range-сценарии, формы, accessibility, troubleshooting и wrapper contracts поддерживаются в Showcase, чтобы документация не расходилась с реальным API.

Возможности

• Режимы date, time, datetime-local, datetime, month.
• Одиночный выбор и range-сценарии через workType: 'multi'.
• Production range через два поля и rangeEndSelector.
• Отдельные форматы отображения и отправки: displayFormat, valueFormat, displayFormatsByLang.
• Локализация: lang, fallbackLang, встроенные ru/en/de, пользовательские translations.
• Ограничения дат: minDate, maxDate, openToDate.
• Timezone режимы: local, utc, IANA timezone string.
• Ручной ввод с валидацией и aria-invalid.
• Instance API: open, close, clear, getValue, setValue, getDate, setDate, destroy.
• Event API: callback options и методы on, off, once, removeAllListeners.
• Wrapper-интеграции для React, Vue 3, Angular и jQuery.

Установка

npm install glike35-date-time-picker

import { DateTimePicker } from 'glike35-date-time-picker';
import 'glike35-date-time-picker/dist/style.css';

const picker = new DateTimePicker('input[name="date"]', {
  lang: 'ru',
  mode: 'date',
});

Пакетный CSS заскоуплен под dtp-* и не переопределяет глобальные body, form или обычные input.

CDN

Для production-страниц используйте CDN-сборку:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/glike35-date-time-picker@1/dist/cdn/glike35-date-time-picker.css"
/>
<script src="https://cdn.jsdelivr.net/npm/glike35-date-time-picker@1/dist/cdn/date-time-picker.min.js"></script>

<input type="date" id="delivery-date" name="delivery_date" />

<script>
  const picker = new DateTimePicker('#delivery-date', {
    lang: 'ru',
    mode: 'date',
  });
</script>

Также доступен unpkg:

<script src="https://unpkg.com/glike35-date-time-picker@1/dist/cdn/date-time-picker.min.js"></script>

Базовые сценарии

Дата

<input type="date" name="date" />

new DateTimePicker('input[name="date"]', {
  lang: 'ru',
  mode: 'date',
});

Дата и время

<input type="datetime-local" name="starts_at" />

new DateTimePicker('input[name="starts_at"]', {
  lang: 'ru',
  mode: 'datetime-local',
  valueFormat: "yyyy-MM-dd'T'HH:mm",
});

Месяц

<input type="month" name="month" />

new DateTimePicker('input[name="month"]', {
  lang: 'ru',
  mode: 'month',
  valueFormat: 'yyyy-MM',
});

Range через два поля

<input type="date" name="check_in" /> <input type="date" name="check_out" />

new DateTimePicker('input[name="check_in"]', {
  lang: 'ru',
  mode: 'date',
  workType: 'multi',
  rangeEndSelector: 'input[name="check_out"]',
});

Публичного workType: 'range' нет. Диапазоны строятся через workType: 'multi'. Подробности: Range documentation.

Wrapper-интеграции

Поддерживаются React, Vue 3, Angular и jQuery.

Framework dependencies объявлены как optional peer dependencies. Для core API они не нужны; установите только dependency выбранной обертки: react/react-dom, vue, @angular/core/@angular/forms или jquery.

Каноничные wrapper contracts описаны в Showcase: options passthrough, events, methods/ref API, lifecycle cleanup, FormData и range integration.

• Интерактивная документация
• Краткая справка по wrapper-файлам

| Интеграция | Импорт / файл | | ---------- | ------------------------------------------------------------ | | React | glike35-date-time-picker/wrappers/react/DateTimePicker.tsx | | Vue 3 | glike35-date-time-picker/wrappers/vue | | Angular | glike35-date-time-picker/wrappers/angular | | jQuery | wrappers/jquery.datetimepicker.js или CDN/example bundle |

Пример React:

import DateTimePicker, {
  DateTimePickerRef,
} from 'glike35-date-time-picker/wrappers/react/DateTimePicker.tsx';
import 'glike35-date-time-picker/dist/style.css';

const pickerRef = useRef<DateTimePickerRef>(null);

<DateTimePicker
  ref={pickerRef}
  name="date"
  mode="date"
  lang="ru"
  onChange={(value, date) => console.log(value, date)}
/>;

API Reference

Полный reference поддерживается в Showcase и автоматически сверяется с типами:

• options из src/interfaces/IOption.ts;
• events из src/types/DateTimePickerEvents.ts;
• methods из публичного instance/static API;
• wrapper snippets against source contracts.

Для локальной проверки:

npm run validate:showcase

Стили

Компонент настраивается через CSS custom properties. Полная справка:

• docs/STYLING.md
• Showcase: custom theme

Примеры

Showcase является каноничной документацией. Старые страницы в examples/cdn/* и examples/{react,vue,angular,jquery}/* используются как standalone/smoke fixtures.

• Публичная документация
• Локальный Showcase
• Индекс examples

Локальный запуск:

npm run dev

Разработка

npm install
npm run dev
npm run validate:showcase
npm run lint
npm test
npm run build

Перед коммитом после git add можно запустить тот же набор, что выполняет husky pre-commit:

npm run lint:staged

Релизные шаги описаны в BUILD.md.

Публикация

Перед публикацией проверьте:

npm run validate:showcase
npm run lint
npm test
npm run build
npm pack --dry-run

Текущая версия и изменения фиксируются в CHANGELOG.md.

Лицензия

MIT