react datepicker
7.5.0
Um componente DatePicker simples e reutilizável para reação (demonstração)
O pacote pode ser instalado via npm:
npm install react-datepicker --save
Ou via Yarn:
yarn add react-datepicker
Você precisará instalar o React e o Saptypes separadamente, pois essas dependências não estão incluídas no pacote. Se você precisar usar um local diferente do EN-US padrão, também precisará importá-lo para o seu projeto a partir do Date-FNS (consulte a seção de localização abaixo). Abaixo está um exemplo simples de como usar o DatePicker em uma visualização do React. Você também precisará exigir o arquivo CSS deste pacote (ou fornecer o seu). O exemplo abaixo mostra como incluir o CSS deste pacote se o seu sistema de compilação suportar requer arquivos CSS (o WebPack é aquele que o faz).
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 ) } />
) ;
} ; O uso mais básico do datepicker pode ser descrito com:
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> Você pode usar o manipulador de eventos onSelect , que dispara cada vez que alguma data de calendário foi selecionada
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> onClickOutside Handler pode ser útil para fechar o DatePicker no modo inline
Veja aqui uma lista completa de adereços que podem ser passados para o componente. Exemplos são dados no site principal.
Você também pode incluir um seletor de tempo adicionando o suporte ShowTimeSelect
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>Os tempos serão exibidos em intervalos de 30 minutos por padrão (configurável padrão via prop timeInterVals)
Mais exemplos de como usar o seletor de tempo são fornecidos no site principal
O seletor de data conta com a internacionalização do DATE-FNS para localizar seus componentes de exibição. Por padrão, o seletor de data usará o local definido globalmente, que é o inglês. Fornecem 3 métodos auxiliares para definir o local:
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >Os locais podem ser alterados da seguinte maneira:
setDefaultLocale('es'); Estamos sempre tentando permanecer compatíveis com a versão mais recente do React. Não podemos apoiar todas as versões mais antigas do React.
Últimas versões compatíveis:
Até a versão 1.8.0, este pacote estava usando o Moment.js. Iniciando v2.0.0, passamos a usar date-fns , que usa objetos de data nativa, para reduzir o tamanho do pacote. Se você estiver mudando de 1.8.0 para 2.0.0 ou superior, consulte o exemplo atualizado acima de conferir o site dos exemplos para obter exemplos atualizados.
O seletor de data é compatível com as versões mais recentes do Chrome, Firefox e IE10+.
Infelizmente, é difícil apoiar os navegadores legados, mantendo nossa capacidade de desenvolver novos recursos no futuro. Para o suporte do IE9, sabe -se que o polifill de classe é necessário, mas isso pode mudar ou quebrar em qualquer ponto no futuro.
A filial main contém a versão mais recente do componente DatePicker.
Para iniciar o desenvolvimento local:
yarn link da raiz do projetocd docs-site && yarn link react-datepickeryarn install da raiz do projetoyarn build da raiz do projetoyarn start da raiz do projetoA última etapa inicia o aplicativo de documentação como um servidor da web simples no http: // localhost: 3000.
Você pode executar yarn test para executar o conjunto de testes e os linheiros. Para ajudá -lo a desenvolver o componente, configuramos alguns testes que cobrem a funcionalidade básica (podem ser encontrados em /tests ). Embora sejamos grandes fãs de teste, isso cobre apenas um pequeno pedaço do componente. É altamente recomendável que você adicione testes ao adicionar novas funcionalidades.
Consulte o arquivo CONTRIBUTING.md para obter mais detalhes sobre como ser configurado.
Os exemplos são hospedados na pasta Docs e são executados no aplicativo simples que carrega o DatePicker. Para estender os exemplos com um novo exemplo, você pode simplesmente duplicar um dos exemplos existentes e alterar as propriedades exclusivas do seu exemplo.
Copyright (c) 2014-2024 Hackerone Inc. e colaboradores individuais. Licenciado sob licença do MIT, consulte a licença para obter a licença completa.
