react datepicker
7.5.0
Un componente de capas de fecha simple y reutilizable para React (demostración)
El paquete se puede instalar a través de NPM:
npm install react-datepicker --save
O a través del hilo:
yarn add react-datepicker
Deberá instalar React y PropTypes por separado, ya que esas dependencias no están incluidas en el paquete. Si necesita usar una ubicación que no sea el EN-US predeterminado, también deberá importarlo a su proyecto desde la fecha de fechas (consulte la sección de localización a continuación). A continuación se muestra un ejemplo simple de cómo usar el capitán DatePicker en una vista React. También deberá requerir el archivo CSS de este paquete (o proporcionar el suyo). El siguiente ejemplo muestra cómo incluir el CSS de este paquete si su sistema de compilación admite los archivos CSS (Webpack es uno que lo hace).
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 ) } />
) ;
} ; El uso más básico del DatePicker se puede describir con:
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> Puede usar el controlador de eventos onSelect que se dispara cada vez que se haya seleccionado una fecha de calendario
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> El controlador onClickOutside puede ser útil para cerrar DatePicker en modo inline
Vea aquí para obtener una lista completa de accesorios que se pueden pasar al componente. Se dan ejemplos en el sitio web principal.
También puede incluir un selector de tiempo agregando el accesorio ShowTimesElect
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>Los tiempos se mostrarán a intervalos de 30 minutos de forma predeterminada (configuración predeterminada a través de TimeIntervals Prop)
Más ejemplos de cómo usar el selector de tiempo se dan en el sitio web principal
El selector de la fecha se basa en la internacionalización de la fecha para localizar sus componentes de visualización. De manera predeterminada, el selector de fecha utilizará la configuración local global, que es inglés. Proporcionados son 3 métodos auxiliares para establecer el local:
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >Los locales se pueden cambiar de la siguiente manera:
setDefaultLocale('es'); Siempre estamos tratando de mantenernos compatibles con la última versión de React. No podemos apoyar todas las versiones más antiguas de React.
Últimas versiones compatibles:
Hasta la versión 1.8.0, este paquete estaba usando momento.js. Comenzando v2.0.0, cambiamos a usar date-fns , que usa objetos de fecha nativos, para reducir el tamaño del paquete. Si está cambiando de 1.8.0 a 2.0.0 o superior, consulte el ejemplo actualizado anterior de consulta el sitio de ejemplos para ejemplos actualizados.
El selector de fecha es compatible con las últimas versiones de Chrome, Firefox e IE10+.
Desafortunadamente, es difícil apoyar los navegadores heredados mientras mantiene nuestra capacidad para desarrollar nuevas características en el futuro. Para el soporte de IE9, se sabe que se necesita el polyfill de la lista de clases, pero esto puede cambiar o romperse en cualquier momento en el futuro.
La rama main contiene la última versión del componente DatePicker.
Para comenzar el desarrollo local:
yarn link desde el proyecto Rootcd docs-site && yarn link react-datepickeryarn install desde el proyecto Rootyarn build desde la raíz del proyectoyarn start desde la raíz del proyectoEl último paso inicia la aplicación de documentación como un simple servidor web en http: // localhost: 3000.
Puede ejecutar yarn test para ejecutar el conjunto de pruebas y los linters. Para ayudarlo a desarrollar el componente, hemos configurado algunas pruebas que cubren la funcionalidad básica (se pueden encontrar en /tests ). Aunque somos grandes fanáticos de las pruebas, esto solo cubre una pequeña pieza del componente. Le recomendamos que agregue pruebas cuando agregue una nueva funcionalidad.
Consulte el archivo CONTRIBUTING.md para obtener más detalles sobre la configuración.
Los ejemplos se alojan dentro de la carpeta Docs y se ejecutan en la aplicación simple que carga el DatePicker. Para extender los ejemplos con un nuevo ejemplo, simplemente puede duplicar uno de los ejemplos existentes y cambiar las propiedades únicas de su ejemplo.
Copyright (c) 2014-2024 Hackerone Inc. y contribuyentes individuales. Licencia bajo la licencia MIT, vea la licencia para la licencia completa.
