Quick nav

Datepicker

Date pickers let users choose dates from a visual calendar that’s consistently applied wherever dates need to be selected.

Version 0.8.0

Installation

To install @igloo-ui/datepicker in your project, you will need to run the following command using npm:

npm install @igloo-ui/datepicker

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/datepicker

Usage

Then to use the component in your code just import it!

import Datepicker from '@igloo-ui/datepicker';

const [showDatepicker, setShowDatepicker] = useState(false);
const [date, setDate] = useState('2022-09-30T00:00:00Z');

useEffect(() => {
  setShowDatepicker(false);
}, [date]);

const formatedDate = new Date('2022-09-30T00:00:00Z').toLocaleDateString();

<Datepicker
  ariaLabel="Event date"
  placeholder="Select date"
  selectedDay={date}
  value={formatedDate}
  isOpen={showDatepicker}
  onClose={() => setShowDatepicker(false)}
  onChange={(date) => setDate(date.utc)}
  onFocus={() => setShowDatepicker(!showDatepicker)}
/>;

API

Prop	Type	Default	Description
`selectedDay`	string	-	Selected value for the date picker. These props represent the local date of the user
`value`	string	-	Specifies the value inside the input.
`placeholder`	string	-	Text that appears in the form control when it has no value set.
`ariaLabel`	string	-	Defines a string value that labels the current element.
`disabled`	boolean		True if the date picker should be disabled.
`error`	boolean		Form.ValidatedField state. True if it has an error.
`isOpen`	boolean		True if the Dropdown list is displayed.
`onChange`	(date: Date) => void	-	Callback function that will be called when the user types something.
`onClose`	() => void	-	Callback when the user clicks outside the Dropdown.
`onFocus`	() => void	-	Function called when the element receives focus.
`onClear`	() => void	-	Callback when they clear the date
`onDateUnavailable`	(date: Date) => void	-	Callback when the user selects a date that is unavailable through the input
`dataTest`	string	-	Add a data-test tag for automated tests.
`isClearable`	boolean		True if the control's value can be cleared.
`clearLabel`	string	-	Label for the clear button. Required if clearable is set to True
`highlightToday`	boolean		Highlights today's date if true
`weekendUnavailable`	boolean		Disabled weekend date
`minDate`	string	-	The minimum allowed date that a user may select
`maxDate`	string	-	The maximum allowed date that a user may select
`readOnly`	boolean		True if the input is readonly
`locale`	string	-	The locale to use for formatting/parsing. If not specified, the default locale will be used @deprecated This prop is deprecated and will be removed in the next major version in favor of Igloo's provider
`manageEverythingInUtc`	boolean		If true, the date picker will manage everything in UTC.