chakra dayzed datepicker

Простой инструмент выбора даты Chakra на основе Dayzed.

Каждый отдельный компонент использует пользовательский интерфейс Chakra. Таким образом, он должен без проблем соблюдать все конфигурации пользовательского интерфейса Chakra.

Сам компонент должен использовать некоторую библиотеку date .

Настоятельно рекомендуем просто скопировать/вставить исходный код из /src и настроить его по своему усмотрению.

Установите зависимость

Нпм

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Пряжа:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Основное использование

Одинокий

  импортировать { SingleDatepicker } из "chakra-dayzed-datepicker";

  const [дата, setDate] = useState (новая дата());

    

Диапазон:

Обратите внимание, что в процессе выбора этот список будет иметь одно значение. Ваша система не будет работать, если вы попытаетесь управлять этим напрямую как [startDate, endDate] , потому что мы попытаемся установить для selectedDates значение [intermediateSelection] , а длина результирующих selectedDates будет иметь значение для средства выбора даты.

  импортировать { RangeDatepicker } из "chakra-dayzed-datepicker";

    const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

    

реквизитКонфигурации:

dateNavBtnProps является наследником ButtonProps Chakra-UI. Это позволяет вам переопределить поведение по умолчанию по вашему желанию, если оно поддерживается Chakra-UI.

 dayOfMonthBtnProps = {
  по умолчаниюBtnProps,
  isInRangeBtnProp,
  выбранныйBtnProps,
  сегодняBtnProps}

dayOfMonthBtnProps позволяет настраивать стиль кнопки даты в зависимости от состояния.
Приоритет стиля: default < isInRange < seleted < today .

popoverCompProps может быть полезен, если вы хотите глобально настроить некоторые простые стили, такие как цвет текста.

 popoverCompProps = {
  popoverContentProps,
  popoverBodyProps}

Подводя итог:

  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, selectedBtnProps: {}, TodayBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {}},calendarPanelProps: { WrapperProps: {}, contentProps: {}, headerProps: {}, diverProps: {},},weekdayLabelProps: {},dateHeadingProps: {}
  }}

Пример:

  propsConfigs = {{dateNavBtnProps: { colorScheme: "blue", вариант: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300", _hover: {background: 'blue.400',} }, isInRangeBtnProps: {color: "жёлтый", }, selectedBtnProps: {background: "blue.200",цвет: "зеленый", }, TodayBtnProps: {background: "teal.400", }},inputProps: { size: "sm"},popoverCompProps: { popoverContentProps: {background: "gray.700" ",color: "white", },},calendarPanelProps: { wrapperProps: {borderColor: 'green', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', }, diverProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'}, dateHeadingProps: { fontWeight: 'semibold '}
  }}

конфиги:

Конфигурации, не связанные с чакрой:

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

другой реквизит:

Имя	одиночный/диапазон	Тип	Значение по умолчанию	Описание
имя	оба	нить	неопределенный	Атрибут имени для элемента
использоватьПортал	оба	логическое значение	неопределенный	чтобы родительские стили не обрезали и не скрывали содержимое
по умолчаниюIsOpen	оба	логическое значение	ЛОЖЬ	откройте панель даты в начале
closeOnSelect	оба	логическое значение	истинный	закройте панель даты после завершения выбора
миндата	оба	Дата	неопределенный	минимальная дата
МаксДата	оба	Дата	неопределенный	максимальная дата
отключеныДаты	одинокий	Набор	неопределенный	только для одного средства выбора даты в качестве сравнения используется startOfDay , например, disabledDates={new Set([startOfDay(new Date()).getTime()}

Для версии < [email protected] :
dayOfMonthBtnProps является продолжением ButtonProps и имеет поддержку только selectedBg ,

  dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
  },