Datepicker

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

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

PropTypeDescription
selectedDaystringSelected value for the date picker.
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.
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