@koliseoapi/react-datetime-picker

react-datetime-picker

React datetime picker, based on date-fns. See the demo here.

Usage

<DateTimeInput
  value={this.state.date}
  onChange={this.onChange}
  showTime={true}
/>

Available properties:

Property	Type	Content	Default Value
dateFormat	String	The date format to use	"yyyy-MM-dd"
showTime	boolean	True to display a separate input field for the time	true
value	Date	The current value	undefined
isValid	function	A function that returns true if a date is considered valid. Can be used to set a maximum or minimum value in the calendar	(date) => true
onChange	function	A function that will be invoked when the user introduces a valid date. Receives a JSON with name, value and strValue.	undefined
locale	Object	A date-fns locale to language-specific date fields	import { en_US } from "date-fns/esm/locale"
i18n	Object	Entries to render a language-specific UI	{Close: 'Close'}

Any other attributes will be forwarded to the date input field:

<label htmlFor="startDate">Start Date</label>
<DateTimeInput
  id="startDate"
  placeholder="dd/mm/yyyy"
  aria-label="Please introduce a start date"
/>

Check app.js for a working example.

Development

Work on the code:

npm i
npm run watch
xdg-open http://localhost:8080/example/

Work on the demo:

./publish.sh

Breaking changes

A previous version of this library was based on moment.js. We replaced this dependency with the more lightweight date-fns, which introduced the following breaking changes in react-datetime-input version 1.0.0:

• dateFormat now requires dd and yyyy to be lowercase (previously: uppercase).
• isValid() now receives an instance of Date (previously: instance of Moment)
• The locale being passed is now a date-fns locale (previously: using Moment locale).

License and acknowledgements

Licensed under the MIT license

react-datetime-picker is based on input-moment by Wang Zuo.