react-date-field

react-date-field

React DateField

Input integration for react-date-picker.

Install

$ npm i --save react-date-field

Usage

import DatePicker from 'react-date-picker'
import DateField from 'react-date-field'

import 'react-date-picker/index.css'

let value = ...

<DateField>
  <DatePicker date={value} onChange={this.onChange} />
</DateField>

For the basic setup, you don't need to configure the DateField with any additional props. Only render a DatePicker inside it.

Props

• displayFormat: String - the display in which dates will be displayed in the input. If none specified, the dateFormat from DatePicker will be used.
• renderInput: Function - you can use the renderInput function to render your own input field. This function will be called with all the necessary props to render the input. You can change the props, and return undefined to allow the default rendering logic go through, or you can return something different than undefined to render whatever you want. By default, the field that will be rendered is readOnly
• clearIcon: Boolean/ReactNode - Defaults to true. If false, no clear icon will be rendered. If a ReactNode is specified, it will be rendered.
• renderClearIcon: Function - a function to render a custom clear icon.
• renderCalendarIcon: Function - a function to render a custom calendar icon.
• expandOnFocus: Boolean - defaults to true.
• collapseOnChange: Boolean - defaults to true.
• expanded: Boolean - if you want to control the expanded prop (when this is true, the picker is visible). Generally you won't need to specify this.
• defaultExpanded: Boolean - defaults to false. Uncontrolled version of expanded
• onFocus: Function
• onBlur: Function

You don't have an onChange prop on the DateField. Instead, use the onChange you specify on the DatePicker.

If you render a <DateField /> with a clear icon, when the user clicks the icon, the onChange function of the picker will be called like onChange('', null, event) - dateText as empty string, moment instance as null and the additional event.

Note

Please use react-date-field with the latest version of react-date-picker. Inside the field, you need to render the picker, which only works correctly if the picker has a default prop isDatePicker: true. This means you could provide your own date picker, as long as it has such a property and it exposes the same signature to the onChange prop/method.

License

MIT