Top
DateInput - Getting started
DateInput
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
Most of the props for the Calendar component are also valid for the <DateInput />, so please see the docs and Calendar API reference.
To start using the <DateInput /> component, all you need to import is React and the code + styles of the component itself: @zippytech/react-toolkit/DateInput and @zippytech/react-toolkit/Calendar/index.css.
For a simple calendar, without the input field integration, see Calendar component.
In order to configure the <Calendar /> component inside the <DateInput />, you have to nest it as children of the <DateInput />. Below you can find an example that configures the <Calendar /> to only allow selecting certain days.
Using the approach shown above, you have access to all the props for the Calendar component, so the calendar rendered inside the <DateInput > can be fully customized.
Very often, you'll want to disable some dates - either dates outside some interval (in which case, you can use minDate and maxDate), or simply random dates, that follow another more complex business requirement, in which case isDisabledDay is the way to go.
The example below shows usage of isDisabledDay to disable selecting weekend days from the <Calendar />.
However, if the <DateInput /> is not read-only, the user can still type-in a value that is not valid as per the logic implemented in the isDisabledDay prop.