DatePicker

DatePickers allow users to easily enter dates.

onChange

(e) => console.log(e)

(e) => console.log(e)

onInputChange

(e) => console.log(e)

(e) => console.log(e)

selected

dateFormat

errorMessage

minDate

maxDate

onBlur

disableFlipping

inputProps

{ labelText: 'End Date:' }

{ labelText: 'End Date:' }

className

name

import * as React from "react";
import { DatePicker } from "@nulogy/components";

export default () => {
  return (
    <DatePicker
      onChange={e => console.log(e)}
      onInputChange={e => console.log(e)}
      selected={
        new Date(
          "Tue Jan 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
        )
      }
      disableFlipping={false}
      inputProps={{ labelText: "End Date:" }}
    />
  );
}

import * as React from "react";
import { DatePicker } from "@nulogy/components";

export default () => {
  return (
    <DatePicker
      onChange={e => console.log(e)}
      onInputChange={e => console.log(e)}
      selected={
        new Date(
          "Tue Jan 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
        )
      }
      disableFlipping={false}
      inputProps={{ labelText: "End Date:" }}
    />
  );
}

Props

Name	Type	Default	Description
onChange	function		Change event handler that will be run whenever the value of the input is updated.
onInputChange	function		Event handler for when the value typed into the input changes
selected	date		The time to display
dateFormat	string	dd MMM yyyy	The default date format (see date-fns for available date formats)
errorMessage	string		The error message to display
minDate	date		The earliest date that can be selected
maxDate	date		The latest date that can be selected
onBlur	function		Change event handler that will be run whenever the input loses focus.
disableFlipping	boolean	false	If true, always opens the calendar below the input rather than automatically flipping upward if there is not enough space below the input
inputProps	object		Options for the input field, see Input component props table for the properties that can be used here
className	string		className
id	string	null	A unique ID for this input
name	string		A unique name for this input

DatePicker

Props

Related Components