React-input-datepicker NPM

npm bundle size GitHub contributors npm NPM

react-input-datepicker

A simple and reusable input datepicker component for React (Demo)

Input Datepicker

Install

npm install react-input-datepicker

Usage

import React, { useState, useCallback } from 'react';
import InputDatepicker from 'react-input-datepicker';

export const App = () => {
  const [value, setValue] = useState<Date | null>();

  const onDateChange = useCallback((date: Date) => {
    setValue(date);
  }, []);

  return (
    <InputDatepicker
      value={value}
      onDateChange={onDateChange}
      minDate={new Date(1900, 0, 1)}
      maxDate={new Date()}
    />
  );
};

Available Props

Prop	Type	Default	Options
value	Date	-	-
onDateChange	func	-	-
minDate	Date	-	-
maxDate	Date	-	-
maxDateMessage	string	'Date must be less than {maxDate + 1}'	-
minDateMessage	string	'Date must be greater than {minDate - 1}'	-
invalidMessage	string	'Not a valid date'	-
showLabels	boolean	true	true, false
showErrors	boolean	true	true, false
showPlaceholders	boolean	true	true, false
format	string	'month/day/year'	'day/month/year', 'day/year/month', 'month/day/year', 'month/year/day', 'year/month/day', 'year/day/month'
labels	Object	English labels	{ year: 'Year'; month: 'Month'; day: 'Day'; }