Ve esta evaluación de 10 de los mejores componentes gratuitos de ReactJS Datepicker.

Top 10: Los mejores componentes de selector de fecha de ReactJS de código abierto

Un selector de fechas es un componente neutral, necesario y muy utilizado que permite al usuario seleccionar una fecha fácilmente sin tener que conocer el formato que espera la entrada, el usuario solo necesita proporcionar la fecha siguiendo una simple interfaz de usuario. Para React, hay muchos componentes de selector de fechas, por lo que para facilitarle las cosas, hemos recopilado 10 de los componentes más importantes de esta utilidad.

Disfruta de nuestra parte superior de los 10 mejores componentes de Datepicker que puede usar en su aplicación React.

10. React Datepicker CS

Demo en vivo

React Datepicker CS

React datepicker es un componente útil y muy simple que muestra un selector de fechas simplificado. Su inicialización también es muy simple ya que recibe solo 5 propiedades:

  • range {Array}: puede personalizar el rango de años
  • onChange {Función}: cuando el usuario establece una fecha
  • locale {String}: el valor predeterminado es , también puede usar en zh
  • disabled {Boolean}: el valor predeterminado es , puede pasar para deshabilitar el componente false true 
  • valor {String}: establece una fecha predeterminada
import React from 'react';

// Importar Datepicker
import ReactDatePicker from 'react-date-picker-cs';
 
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Estado inicial con fecha
        this.state = {
            selectedDate: '2017-08-13'
        };

        // Este enlace es necesario para que 'this' funcione en la devolución de llamada
        this.handleLog = this.handleLog.bind(this);
    }

    handleLog(date) {
		this.setState({
			selectedDate: date
		});
	}

    render() {
        return (
            <div>
                <ReactDatePicker
                    onChange={this.handleLog} 
                    range={[2013, 2020]} 
                    value={this.state.selectedDate} 
                    disabled={true}
                />
            </div>
        );
    }
}

9. RC Datepicker

Demo en vivo

RC Datepicker

RC Datepicker es un selector de fechas decente y hermoso que se puede usar con React. DatePicker y DatePickerInput usan Moment.js , por lo que admiten cualquier configuración regional interna moment/locale. Para seleccionar una configuración regional, debes solicitarlo antes de solicitar el selector de fecha o el momento en cualquier lugar de su aplicación: de esta manera, se seleccionará automáticamente como configuración regional actual. 

import React from 'react';

// Importar Datepicker
import { DatePicker, DatePickerInput } from 'rc-datepicker';

// Importa el estilo predeterminado
import 'rc-datepicker/lib/style.css';
 
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Estado inicial con fecha
        this.state = {
            // or Date or Moment.js
            selectedDate: '2017-08-13'
        };

        // Este enlace es necesario para que 'this' funcione en la devolución de llamada
        this.onChange = this.onChange.bind(this);
    }

    onChange(date) {
		this.setState({
			selectedDate: date
		});
	}

    render() {
        return (
            <div>
                <DatePickerInput
                    onChange={this.onChange}
                    value={this.state.selectedDate}
                    className='my-custom-datepicker-component'
                />

                {/* this renders only a fixed datepicker */}
                <DatePicker onChange={this.onChange} value={this.state.selectedDate} />
            </div>
        );
    }
}

8. React Bootstrap Datepicker

Demo en vivo

React Bootstrap Datepicker

Este selector de fechas es compatible con React 0.14.xy 0.15.x. Está basado y requiere el marco Bootstrap React como dependencia (que puede instalarse automáticamente), si no, instala también la biblioteca Bootstrap React.

Como todas las bibliotecas basadas en Bootstrap, debe importar algún tema de Bootstrap desde una copia CSS local o desde una CDN:

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">

Y luego inicializa el selector de fecha en React:

import React from 'react';

// Importa Datepicker
import DatePicker from "react-bootstrap-date-picker";

// Importa componentes de Bootstrap
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import HelpBlock from 'react-bootstrap/lib/HelpBlock';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Estado inicial con fecha
        this.state = {
            selectedDate: new Date().toISOString()
        };

        // Este enlace es necesario para que 'esto' funcione en la devolución de llamada
        this.onChange = this.onChange.bind(this);
    }

    onChange(value, formattedValue) {
		this.setState({
            value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
            formattedValue: formattedValue // Formatted String, ex: "11/19/2016"
        });
	}

    componentDidUpdate() {
        // Accede a la cadena ISO y a los valores con formato desde el DOM.
        var hiddenInputElement = document.getElementById("example-datepicker");
        console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"
        console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex: "11/19/2016"
    }

    render() {
        return (
            <div>
                <FormGroup>
                    <ControlLabel>Label</ControlLabel>
                    <DatePicker id="example-datepicker" value={this.state.selectedDate} onChange={this.onChange} />
                    <HelpBlock>Help</HelpBlock>
                </FormGroup>
            </div>
        );
    }
}

7. React Calendar

Demo en vivo

React Calendar Toolkit

React Calendar no es solo un componente de calendario, sino un conjunto de herramientas modular para crear todo lo relacionado con los calendarios en React, como Datepickers. Se encuentra en la etapa alfa inicial, por lo que llegará la documentación y más funciones. Sin embargo, todavía se puede utilizar:

import React from 'react';

// Importar Datepicker
import moment from 'moment';

// Importar Calendario
import { Calendar } from 'react-calendar';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            date: moment().startOf('year')
        }
    }

    render() {
        return (
            <div>
                {/* Base calendar component */}
                <Calendar
                    weekNumbers={true}
                    size={2}
                    startDate={this.state.date}
                    date={this.state.date}
                    endDate={this.state.date.clone().endOf('year')}
                    mods={
                        [
                            {
                                date: moment(),
                                classNames: ['current'],
                                component: ['day', 'month', 'week']
                            }
                        ]
                    }

                />
            </div>
        );
    }
}

No hay estilo por defecto, pero se incluye un tema de ejemplo que usa bootstrap less/bootstrap-theme.less.

6. React Input Calendar

Demo en vivo

React Input Calendar

React Input es un componente simple para elegir una fecha dentro de una entrada. Todos los estilos están escritos en CSS y están en formato style/index.css. Todo lo que necesitas hacer es importar el componente:

import Calendar from 'react-input-calendar'

<Calendar format='DD/MM/YYYY' date='4-12-2014' />

Y lee más sobre las propiedades que admite el componente .

5. Input Moment

Demo en vivo

Input Moment Library

Input Moments es un selector de fecha y hora basado en React impulsado por momentjs ,  el diseño es de un profesional independiente  e íconos de ionicons .

4. React Datepicker

Demo en vivo

React Datepicker Component by Hackerone

React Datepicker es un componente de selector de fecha muy simple y reutilizable para React. Deberás instalar React y Moment.js por separado, ya que esas dependencias no están incluidas en el paquete. A continuación te mostramos un ejemplo simple sobre cómo usar el selector de fechas en una vista de React. También deberás solicitar el archivo css de este paquete (o proporcionar el tuyo):

import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// importar 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            startDate: moment()
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(date) {
        this.setState({
            startDate: date
        });
    }

    render() {
        return <DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange}
        />;
    }
}

3. React Day Picker

Demo en vivo

React Day Picker

React Day Picker es un selector de fechas flexible. No tiene dependencias, es totalmente personalizable, ofrece soporte ARIA, es localizable y pesa menos de 8KB.

2. React Infinite Calendar

Demo en vivo

React Infinite Calendar

El selector de fecha de desplazamiento infinito es un componente de React, con localización, selección de rango, temas, compatibilidad con teclado y más. Las principales características del componente son:

  •  Desplazamiento infinito : sigue desplazándote, sigue desplazándote
  • Flexible  : fecha mínima / máxima, fechas de discapacidad, días de discapacidad, etc.
  • Extensible  : agregue selección de rango de fechas, selección de fechas múltiples o cree su propia HOC.
  • Localización y traducción  - En français, s'il vous plaît!
  • Personalizable  : personalice y tema a su gusto.
  • Selección de año  : para saltar rápidamente de un año a otro
  • Soporte de teclado
  • Eventos y devoluciones de llamada  : beforeSelect, onSelect, onScroll, etc.
  • Móviles de usar  - sedoso desplazamiento suave en el móvil

1. React Dates

Demo en vivo

React Dates Component Airbnb

React Dates es una biblioteca de selectores de fechas fácil de internacionalizar y compatible con dispositivos móviles para la web. SingleDatePicker es un componente totalmente controlado que permite a los usuarios seleccionar una sola fecha. Puede controlar la fecha seleccionada usando la fecha y los accesorios onDateChange como se muestra a continuación. SingleDatePicker también administra el estado interno de las fechas parciales ingresadas escribiendo (aunque onDateChange no se activará hasta que se haya ingresado una fecha por completo en ese caso). Su inicialización es bastante simple:

import React from 'react';

// Importar Moment y React Dates
import moment from 'moment';
import {  SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
           date: moment()
        }
    }
  
    render() {
        return (
            <div>
                <SingleDatePicker
                    date={this.state.date} // momentPropTypes.momentObj or null
                    onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
                    focused={this.state.focused} // PropTypes.bool
                    onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
                />
            </div>
        );
    }
}

Si conoces otro componente de selector de fechas increíble para reaccionar y es de código abierto, compártelo con la comunidad en el cuadro de comentarios.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores