npm:@blaze-react/date-time-input

README

Description

Datepicker tools that wraps react-datepicker.

Note about importing

This component requires its consumers to manually import the third-party library's CSS

import "react-datepicker/dist/react-datepicker.css";

Usage

Required

<DateTimeInput
  label="Date Time input required"
  onChange={({ event, value }) => {}}
  type="dateTime"
  modifier="full-width"
  validationMessage="Date Time is required"
  error
  required
/>

Disabled

<DateTimeInput
  label="Date Time input disabled"
  onChange={({ event, value }) => {}}
  type="dateTime"
  modifier="full-width"
  validationMessage="Date Time is disabled"
  error
  disabled
/>

Pick only date

<DateTimeInput
  label="Date input"
  onChange={({ event, value }) => {}}
  type="date"
  modifier="full-width"
/>

Pick only time

<DateTimeInput
  label="Date input"
  onChange={({ event, value }) => {}}
  type="time"
  modifier="full-width"
/>

API

DateTimeInput can receive a number of `props` as follow:

NAME	TYPE	DEFAULT
label	String	empty
type	['dateTime', 'date', 'time']	dateTime
value	String	empty
validationMessage	String	This field is required
disabled	Boolean	false
required	Boolean	false
error	Boolean	false
onChange	Function	() => {}

onChange events

The raw onChange events are inconsistent from the underlying component and when using the today button so the component makes sure to set the the following props on an event.target

name: uses the component id prop
value: the date from the event

Usage no npm install needed!