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.