Igloo branding


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


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


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(() => {
}, [date]);

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

  ariaLabel="Event date"
  placeholder="Select date"
  onClose={() => setShowDatepicker(false)}
  onChange={(date) => setDate(date.utc)}
  onFocus={() => setShowDatepicker(!showDatepicker)}


selectedDaystringSelected value for the date picker. These props represent the local date of the user
valuestringSpecifies the value inside the input.
placeholderstringText that appears in the form control when it has no value set.
ariaLabelstringDefines a string value that labels the current element.
disabledbooleanTrue if the date picker should be disabled.
errorbooleanForm.ValidatedField state. True if it has an error.
isOpenbooleanTrue if the Dropdown list is displayed.
onChange(date: Date) => voidCallback function that will be called when the user types something.
onClose() => voidCallback when the user clicks outside the Dropdown.
onFocus() => voidFunction called when the element receives focus.
onClear() => voidCallback when they clear the date
onDateUnavailable(date: Date) => voidCallback when the user selects a date that is unavailable through the input
dataTeststringAdd a data-test tag for automated tests.
isClearablebooleanTrue if the control's value can be cleared.
clearLabelstringLabel for the clear button. Required if clearable is set to True
highlightTodaybooleanHighlights today's date if true
weekendUnavailablebooleanDisabled weekend date
minDatestringThe minimum allowed date that a user may select
maxDatestringThe maximum allowed date that a user may select
readOnlybooleanTrue if the input is readonly
localestringThe locale to use for formatting/parsing. If not specified, the default locale will be used.
manageEverythingInUtcbooleanIf true, the date picker will manage everything in UTC.