1.1.0 • Published 4 years ago
@koliseoapi/react-datetime-picker v1.1.0
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.shBreaking 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:
dateFormatnow requiresddandyyyyto be lowercase (previously: uppercase).isValid()now receives an instance ofDate(previously: instance ofMoment)- 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.