react datepicker
7.5.0
Простой и многоразовый компонент DatePicker для React (демонстрация)
Пакет может быть установлен через NPM:
npm install react-datepicker --save
Или через пряжу:
yarn add react-datepicker
Вам нужно будет установить React и Proptypes отдельно, так как эти зависимости не включены в пакет. Если вам нужно использовать локаль, отличную от EN-US по умолчанию, вам также необходимо импортировать его в свой проект из Date-FNS (см. Раздел локализации ниже). Ниже приведен простой пример того, как использовать DatePicker в представлении React. Вам также необходимо потребовать файла CSS из этого пакета (или предоставить свой собственный). В приведенном ниже примере показано, как включить CSS из этого пакета, если ваша система сборки поддерживает требование CSS -файлов (WebPack - это тот, который это делает).
import React , { useState } from "react" ;
import DatePicker from "react-datepicker" ;
import "react-datepicker/dist/react-datepicker.css" ;
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Example = ( ) => {
const [ startDate , setStartDate ] = useState ( new Date ( ) ) ;
return (
< DatePicker selected = { startDate } onChange = { ( date ) => setStartDate ( date ) } />
) ;
} ; Самое основное использование DatePicker можно описать с помощью:
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> Вы можете использовать обработчик событий onSelect , который каждый раз стреляет в календарную дату
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> Обработчик onClickOutside может быть полезен для закрытия DatePicker в режиме inline
См. Здесь для полного списка реквизита, которые могут быть переданы в компонент. Примеры приведены на основном веб -сайте.
Вы также можете включить сборщик времени, добавив опору ShowTimeElect
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>Время будет отображаться с 30-минутными интервалами по умолчанию (по умолчанию настраивается с помощью PROP TimeIntervals)
Больше примеров того, как использовать Time Picker, приведены на основном веб -сайте
Выбор даты полагается на интернационализацию Date-FNS для локализации своих компонентов дисплея. По умолчанию выбор даты будет использовать местонахождение в мире, которое является английским. При условии 3 вспомогательных метода для установки локали:
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >Локалы могут быть изменены следующим образом:
setDefaultLocale('es'); Мы всегда пытаемся оставаться совместимыми с последней версией React. Мы не можем поддержать все старые версии React.
Последние совместимые версии:
Вплоть до версии 1.8.0, этот пакет использовал moment.js. Запуск v2.0.0, мы переключились на использование date-fns , которая использует собственные объекты даты, чтобы уменьшить размер пакета. Если вы переключаетесь с 1,8.0 на 2,0.0 или выше, см. Обновленный пример выше, чтобы ознакомиться с примерами для примеров для актуальных примеров.
Сборщик даты совместим с последними версиями Chrome, Firefox и IE10+.
К сожалению, трудно поддерживать устаревшие браузеры, сохраняя при этом нашу способность развивать новые функции в будущем. Для поддержки IE9 известно, что необходим полифиль ClassList, но это может измениться или сломать в любой момент в будущем.
main филиал содержит последнюю версию компонента DatePicker.
Чтобы начать местное развитие:
yarn link от Project Rootcd docs-site && yarn link react-datepickeryarn install из Project Rootyarn build из Project Rootyarn start от Project RootПоследний шаг запускает приложение документации как простое веб -сервер на http: // localhost: 3000.
Вы можете запустить yarn test , чтобы выполнить тестовый набор и линтерс. Чтобы помочь вам разработать компонент, мы настроили некоторые тесты, которые охватывают основную функциональность (можно найти в /tests ). Несмотря на то, что мы большие поклонники тестирования, это охватывает только небольшой кусочек компонента. Мы настоятельно рекомендуем вам добавить тесты, когда вы добавляете новые функции.
Пожалуйста, обратитесь к файлу CONTRIBUTING.md для получения более подробной информации о получении настройки.
Примеры размещаются в папке DOCS и запускаются в простом приложении, которое загружает дату. Чтобы расширить примеры с новым примером, вы можете просто дублировать один из существующих примеров и изменить уникальные свойства вашего примера.
Copyright (C) 2014-2024 Hackerone Inc. и отдельные участники. Лицензировано по лицензии MIT, см. Лицензию на полную лицензию.
