DatePicker#

Компонент выбора даты.

import { DatePicker, DateLibAdapterProvider } from '@v-uik/date-picker'

DatePicker API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации. `Partial<Record<"disabled" / "error" / "root" / "inputContainer" / "calendarPickerDropdown", string>>`	-
2	label	Подпись над полем ввода (ReactNode)	-
3	labelProps	Свойства компонента InputLabel (InputLabelProp)	-
4	helperText	Подпись под полем ввода (ReactNode)	-
5	helperTextProps	Свойства компонента InputHelperText (InputHelperTextProps)	-
6	error	Индикатор ошибки (boolean)	-
7	inputProps	Свойства компонента InputBase или MaskedInputBase (InputBaseProps MaskedInputBaseProps)	-
4	disabled	Заблокировать поле (boolean)	-
30	size	Размер поля: "sm", "md", "lg"	"md"
9	open	Раскрыть date picker (boolean)	-
10	dropdownProps	Свойства компонента Dropdown (DropdownProps)	-
11	renderInput	Функция для отображения поля ввода `((params: InputBaseProps	MaskedInputBaseProps) => ReactNode)`
12	shouldDisableDate	Функция отключения даты. Функция будет вызвана для каждой даты (дня, месяца, года), которая в данный момент отображает в календаре. Дата будет отключена, если функция вернет true `((date: TDate) => boolean)`	-
13	renderDay	Функция для отображения дня `((params: DayParams<unknown>) => ReactNode)`	-
14	calendarViewExternalProps	`Partial<ExternalCalendarViewComponentsProps<TDate>>`	-
15	value	Значение TDate	-
16	onChange	Обработчик изменения значения `(value: TDate) => void`	-
17	views	Доступные панели выбора даты: day, month, year	-
18	format	Формат отображения даты в input (string)	-
19	mask	Маска ввода (string)	-
20	validationErrorMessages	Сообщения ошибок при вводе некорректных дат `Partial<DateValidationErrorMessages>`	-
21	disableFuture	Заблокировать выбор даты в будущем (boolean)	-
22	disablePast	Заблокировать выбора даты в прошлом (boolean)	-
23	minDate	Минимальная допустимая дата (TDate)	-
24	maxDate	Максимальная допустимая дата (TDate)	-
25	disableDate	Заблокировать определенную дату `((date: TDate) => boolean)`	-

DateLibAdapterProvider API#

№	Свойство	Описание	Значение по умолчанию
1	dateAdapter	Адаптер для форматирования даты из библиотеки @date-io `new (...args: any[]) => IUtils<TDate>`	-
2	options	Параметры для конструктора адаптера. В зависимости от конструктора будет отличаться набор параметров. Общая сигнатура: any

Примечание:

перед началом работы убедитесь, что установлен адаптер date-io. Он позволяет использовать ту же библиотеку дат, которая уже установлена в приложении.

Чтобы подключить библиотеку дат, используйте один из существующих адаптеров или напишите свой.

//es modules
import { DateFnsAdapter } from '@v-uik/date-picker/dist/adapters/esm/date-fns'
import { DateFnsJalaliAdapter } from '@v-uik/date-picker/dist/adapters/esm/date-fns-jalali'
import { DayjsAdapter } from '@v-uik/date-picker/dist/adapters/esm/dayjs'
import { HijriAdapter } from '@v-uik/date-picker/dist/adapters/esm/hijri'
import { JalaaliAdapter } from '@v-uik/date-picker/dist/adapters/esm/jalaali'
import { LuxonAdapter } from '@v-uik/date-picker/dist/adapters/esm/luxon'
import { MomentAdapter } from '@v-uik/date-picker/dist/adapters/esm/moment'

//common js
import { DateFnsAdapter } from '@v-uik/date-picker/dist/adapters/date-fns'
import { DateFnsJalaliAdapter } from '@v-uik/date-picker/dist/adapters/date-fns-jalali'
import { DayjsAdapter } from '@v-uik/date-picker/dist/adapters/dayjs'
import { HijriAdapter } from '@v-uik/date-picker/dist/adapters/hijri'
import { JalaaliAdapter } from '@v-uik/date-picker/dist/adapters/jalaali'
import { LuxonAdapter } from '@v-uik/date-picker/dist/adapters/luxon'
import { MomentAdapter } from '@v-uik/date-picker/dist/adapters/moment'

С помощью компонента DateLibAdapterProvider пробрасывается необходимый API для работы с датами для всех компонентов DatePicker. Подключить этот компонент нужно один раз в файле инициализации приложения.

import * as React from 'react'
import { DatePicker, DateLibAdapterProvider } from '@v-uik/date-picker'
import { DateFnsAdapter } from '@v-uik/date-picker/adapters/date-fns'
import { ru } from 'date-fns/locale'

export function App() {
  return (
    <DateLibAdapterProvider
      dateAdapter={DateFnsAdapter}
      options={{ locale: ru }}
    >
      <App />
    </DateLibAdapterProvider>
  )
}

Выбор времени#

Ниже приведен базовый пример выбора времени. С помощью объекта inputProps можно настраивать ширину, placeholder и прочие параметры текстового поля. Использование параметра fullWidth недоступно при использовании рендер-функции renderInput.

import * as React from 'react'
import { DatePicker } from '@v-uik/date-picker'
import { externalAriaProps } from './common'

const inputProps = {
  placeholder: 'дд.мм.гггг',
}

export const BasicStory = (): React.ReactElement => {
  const [date, setDate] = React.useState<Date | null>(null)

  const handleChange = React.useCallback(
    (value) => {
      setDate(value)
    },
    [setDate]
  )

  return (
    <DatePicker
      value={date}
      mask="11.11.1111"
      inputProps={inputProps}
      calendarViewExternalProps={externalAriaProps}
      onChange={handleChange}
    />
  )
}

Отключение дат#

import * as React from 'react'
import { DatePicker } from '@v-uik/date-picker'
import { externalAriaProps } from './common'

const inputProps = {
  placeholder: 'дд.мм.гггг',
}

const isDisabledDate = (date: Date | null) => {
  return !!date && date.getTime() < Date.now()
}

export const DisableDatesStory = (): React.ReactElement => {
  const [date, setDate] = React.useState<Date | null>(null)

  const handleChange = React.useCallback(
    (value) => {
      setDate(value)
    },
    [setDate]
  )

  return (
    <DatePicker
      classes={{
        root: 'hello',
      }}
      value={date}
      mask="11.11.1111"
      inputProps={inputProps}
      shouldDisableDate={isDisabledDate}
      calendarViewExternalProps={externalAriaProps}
      onChange={handleChange}
    />
  )
}

Валидация минимальной/максимальной даты#

import * as React from 'react'
import { DatePicker } from '@v-uik/date-picker'
import { addDays } from 'date-fns'
import { externalAriaProps } from './common'

const inputProps = {
  placeholder: 'дд.мм.гггг',
}

export const MinMaxDateStory = (): React.ReactElement => {
  const [date, setDate] = React.useState<Date | null>(null)

  return (
    <DatePicker
      label="Выберите дату"
      value={date}
      mask="11.11.1111"
      inputProps={inputProps}
      minDate={new Date()}
      maxDate={addDays(new Date(), 7)}
      calendarViewExternalProps={externalAriaProps}
      onChange={setDate}
    />
  )
}

Замена поля ввода времени#

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

import * as React from 'react'
import { DatePicker } from '@v-uik/date-picker'
import { Button } from '@v-uik/button'
import { externalAriaProps } from './common'

const inputProps = {
  placeholder: 'дд.мм.гггг',
}

export const RenderInputStory = (): JSX.Element => {
  const [date, setDate] = React.useState<Date | null>(null)

  const handleChange = React.useCallback(
    (value) => {
      setDate(value)
    },
    [setDate]
  )

  return (
    <DatePicker
      value={date}
      mask="11.11.1111"
      inputProps={inputProps}
      calendarViewExternalProps={externalAriaProps}
      renderInput={({ value }) => (
        <Button>{value ? value : 'Выбрать дату'}</Button>
      )}
      onChange={handleChange}
    />
  )
}

Замена плашки выбора дня#

В данном примере представлен вариант кастомизации элемента дня через рендер-функцию.

import * as React from 'react'
import { DatePicker } from '@v-uik/date-picker'
import { Button, ButtonKinds } from '@v-uik/button'
import { clsx, createUseStyles } from '@v-uik/theme'
import { externalAriaProps } from './common'

const useStyles = createUseStyles((theme) => ({
  root: {
    minWidth: 40,
    width: 40,
    height: 40,
    padding: 0,
  },

  selected: {
    backgroundColor: theme.ref.palette.green95,
  },

  today: {
    backgroundColor: theme.ref.palette.electricBlue95,
  },
}))

export const RenderDay = (): JSX.Element => {
  const classesMap = useStyles()

  const [date, setDate] = React.useState<Date | null>(null)

  return (
    <DatePicker
      format="dd.MM.yyyy"
      mask="11.11.1111"
      calendarViewExternalProps={externalAriaProps}
      renderDay={({ value, selected, isToday, onClick, onFocus }) => (
        <Button
          key={value}
          className={clsx(classesMap.root, {
            [classesMap.today]: isToday,
            [classesMap.selected]: selected,
          })}
          kind={ButtonKinds.ghost}
          color="secondary"
          onClick={onClick}
          onFocus={onFocus}
        >
          {value}
        </Button>
      )}
      value={date}
      onChange={setDate}
    />
  )
}

Sub-компоненты#

Некоторые низкоуровневые компоненты, которые используются в пакете @v-uik/date-picker, можно применять для создания собственных компонентов работы с датами.

Sub-компонент DayView#

Используется для отображения календаря.

import * as React from 'react'
import { DayView, useDateLibAdapter } from '@v-uik/date-picker'
import { Text } from '@v-uik/typography'
import { externalAriaProps } from './common'

export const DayViewStory = (): JSX.Element => {
  const [date, setDate] = React.useState<Date | null>(null)
  const dateAdapter = useDateLibAdapter<Date>()
  const formattedDate = date
    ? dateAdapter.formatByString(date, 'dd.MM.yyyy')
    : ''

  return (
    <>
      <DayView
        style={{ display: 'inline-block' }}
        value={date}
        onChange={setDate}
        {...externalAriaProps.dayViewProps}
      />

      <Text style={{ marginTop: 16 }}>
        {`выбранная дата: ${formattedDate}`}
      </Text>
    </>
  )
}

DayView API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации: `Partial<Record<"row" / "selected" / "withinRange" / "withinHoverRange" / "withinHoverRangeStart" / "withinHoverRangeEnd" / "weekDay" / "dayButton" / "today" / "notCurrentMonth" / "weekStart" / "weekEnd" / "monthStart" / "monthEnd", string>>`	-
2	value	Выбранная дата (TDate, null)	-
3	onChange	Событие изменения даты `(date: TDate) => void`	-
4	shouldDisableDate	Функция отключения дат. Функция будет вызвана для каждой даты, которая отображается в календаре. Дата будет отключена, если функция вернет true `((date: TDate) => boolean)`	-
5	displayedDate	Управляет отображением текущего месяца. Если значение не передано, предположение о текущем месяце будет получено из value. Если value также не определено, предположение о текущем месяце высчитывается относительно сегодняшнего дня по системному времени (TDate, null)	-
6	onChangeMonth	Событие изменения отображения текущего месяца `((date: TDate) => void)`	-
7	renderDay	Функция для отображения дня `((params: DayParams<unknown>) => ReactNode)`	-
8	onChangeDisplayedDate	Функция для события изменения displayedDate `((date: TDate) => void)`	-
9	ref	`((instance: HTMLDivElement / null) => void) / RefObject<HTMLDivElement> / null`	-

Sub-компонент MonthView#

Используется для отображения месяцев.

import * as React from 'react'
import { MonthView, useDateLibAdapter } from '@v-uik/date-picker'
import { Text } from '@v-uik/typography'
import { externalAriaProps } from './common'

export const MonthViewStory = (): JSX.Element => {
  const [date, setDate] = React.useState<Date | null>(null)
  const dateAdapter = useDateLibAdapter<Date>()
  const formattedDate = date
    ? dateAdapter.formatByString(date, 'LLLL yyyy')
    : ''

  return (
    <>
      <MonthView
        value={date}
        onChange={setDate}
        {...externalAriaProps.monthViewProps}
      />

      <Text style={{ marginTop: 16 }}>
        {`выбранный месяц: ${formattedDate}`}
      </Text>
    </>
  )
}

MonthView API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации: `Partial<Record<"root" / "selected" / "withinRange" / "withinHoverRange" / "withinHoverRangeStart" / "withinHoverRangeEnd" / "monthButton", string>>`	-
2	value	Выбранная дата (TDate, null)	-
3	onChange	Событие изменения даты `(date: TDate) => void`	-
4	shouldDisableDate	Функция отключения дат. Функция будет вызвана для каждой даты, которая отображается в календаре. Дата будет отключена, если функция вернет true `((date: TDate) => boolean)`	-
5	displayedDate	Управляет отображением текущего месяца. Если значение не передано, предположение о текущем месяце будет получено из value. Если value также не определено, предположение о текущем месяце высчитывается относительно сегодняшнего дня по системному времени (TDate, null)	-
6	ref	`((instance: HTMLDivElement / null) => void) / RefObject<HTMLDivElement> / null`	-

Sub-компонент YearView#

Используется для отображения лет.

import * as React from 'react'
import { YearView, useDateLibAdapter } from '@v-uik/date-picker'
import { Text } from '@v-uik/typography'
import { externalAriaProps } from './common'

export const YearViewStory = (): JSX.Element => {
  const [date, setDate] = React.useState<Date | null>(null)
  const dateAdapter = useDateLibAdapter<Date>()
  const formattedDate = date ? dateAdapter.formatByString(date, 'yyyy') : ''

  return (
    <>
      <YearView
        value={date}
        onChange={setDate}
        {...externalAriaProps.yearViewProps}
      />

      <Text style={{ marginTop: 16 }}>{`выбранный год: ${formattedDate}`}</Text>
    </>
  )
}

YearView API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации: `Partial<Record<"root" / "selected" / "yearButton" / "withinRange" / "withinHoverRange" / "withinHoverRangeStart" / "withinHoverRangeEnd", string>>`	-
2	value	Выбранная дата (TDate, null)	-
3	onChange	Событие изменения даты `(date: TDate) => void`	-
4	shouldDisableDate	Функция отключения дат. Функция будет вызвана для каждой даты, которая отображается в календаре. Дата будет отключена, если функция вернет true `((date: TDate) => boolean)`	-
5	displayedDate	Управляет отображением текущего месяца. Если значение не передано, предположение о текущем месяце будет получено из value. Если value также не определено, предположение о текущем месяце высчитывается относительно сегодняшнего дня по системному времени (TDate, null)	-
6	ref	`((instance: HTMLDivElement / null) => void) / RefObject<HTMLDivElement> / null`	-
7	autoFocus	Включить автоматическую установку фокуса на выбранном или текущем годе (boolean)

Sub-компонент CalendarPicker#

Одновременный выбор даты, месяца и года.

import * as React from 'react'
import { CalendarPicker, useDateLibAdapter } from '@v-uik/date-picker'
import { Text } from '@v-uik/typography'
import { externalAriaProps } from './common'

export const CalendarPickerStory = (): JSX.Element => {
  const [date, setDate] = React.useState<Date | null>(null)
  const dateAdapter = useDateLibAdapter<Date>()
  const formattedDate = date
    ? dateAdapter.formatByString(date, 'dd.MM.yyyy')
    : ''

  return (
    <>
      <CalendarPicker
        value={date}
        externalComponentsProps={externalAriaProps}
        onChange={() => null}
        onChangeDay={setDate}
      />

      <Text style={{ marginTop: 16 }}>
        {`выбранная дата: ${formattedDate}`}
      </Text>
    </>
  )
}

CalendarPicker API#

№	Свойство	Описание	Значение по умолчанию
1	value	Выбранная дата (TDate, null)	-
2	onChange	Событие изменения даты `(date: TDate) => void`	-
3	shouldDisableDate	Функция отключения дат. Функция будет вызвана для каждой даты, которая отображается в календаре. Дата будет отключена, если функция вернет true `((date: TDate) => boolean)`	-
4	displayedDate	Управляет отображением текущего месяца. Если значение не передано, предположение о текущем месяце будет получено из value. Если value также не определено, предположение о текущем месяце высчитывается относительно сегодняшнего дня по системному времени (TDate, null)	-
5	ref	`((instance: HTMLDivElement / null) => void) / RefObject<HTMLDivElement> / null`	-
6	defaultDisplayedDate	Указывает, с какой даты начать отображение календаря. Будет использоваться при первой отрисовки компонента, если не указано свойство value (TDate)	-
7	defaultView	Определяет, что показать при первом отображении компонента — выбор дня, месяца или года	-
8	onChangeDay	Событие изменения даты. Срабатывает, когда пользователь выбирает день `((date: TDate) => void)`	-
9	onChangeMonth	Событие изменения даты. Срабатывает, когда пользователь выбирает месяц `((date: TDate) => void)`	-
10	onChangeYear	Событие изменения даты. Срабатывает, когда пользователь выбирает год `((date: TDate) => void)`	-
11	renderDay	Функция для отображения дня `((params: DayParams<unknown>) => ReactNode)`	-
12	externalComponentsProps	Дополнительные свойства для компонентов DayView, MonthView, YearView, левой/правой кнопки навигации, кнопки в панеле месяц/год `Partial<ExternalCalendarViewComponentsProps<TDate>>`	-