DatePicker: React

Allows users to enter a date. This can be done by either having the fill out the date via an input, but also provides the user with a calendar view for easier date selection.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { DatePicker } from '@mediahuis/chameleon-react';

export default function Example() {
  const [date, setDate] = React.useState(new Date());

  return (
    <DatePicker
      id="top"
      label="Pick your date"
      onChange={date => setDate(date)}
      value={date}
    />
  );
}

Properties

Property	Type	Default	Required	Description
action	ReactNode	-	No	The contents displayed within the ActionLabel.
className	String	-	No	Allows extending the class names of the DatePicker component.
defaultMonth	Date	-	No	The initial month to show in the calendar.
disabled	Boolean	-	No	Sets the HTML disabled attribute.
disabledDays	Matcher	-	No	A react-day-picker modifier for greater control over disabled days.
error	Boolean	-	No	Visually displays the DatePicker with an error state. It also adds the necessary accessibility tags.
format	String	'dd/MM/yyyy'	No	The format of the inputValue.
id	String	-	Yes	Sets the native HTML id attribute. It will also affect the label-id and the message-id for accessibility reasons.
inline	Boolean	-	No	Makes the DatePicker inline. It will stay open and not close automatically.
label	ReactNode	-	Yes	The contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	No	The `labelHidden` prop visually hides the label. Note that the label is still required for accessibility.
locale	Locale	-	No	The locale to be used in the Calendar.
mask	String	'99/99/9999'	No	Helps the user with the input by ensuring a predefined format.
message	String	-	No	The contents displayed beneath the input.
name	String	-	No	The name of the form element.
optionalLabel	String	-	No	The contents displayed within the OptionalLabel.
pickerFooter	String	-	No	Text shown underneath the datepicker. It can be used to give hints or add extra information.
pickerInputOnly	Boolean	-	No	Determines whether the DatePicker should only be controlled by the CalendarDialog.
placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'	'bottom-start'	No	Sets the placement of the CalendarDialog against the TextField.
readOnly	Boolean	-	No	Determines whether the DatePicker is read-only or not.
showOnFocus	Boolean	-	No	Determines whether the DatePicker calendar should show onFocus or not.
success	Boolean	-	No	Indicates that the DatePicker is successfully filled in.
type	String	-	No	The type of the input.
usePortal	Boolean	-	No	The value of the DatePicker.
value	Date	-	No	The value of the calendar.
minDate	Date	-	No	The value of the calendar.

locale

Every brand has one fixed locale, but if your brand needs to use another locale it is possible to provide a custom locale.

Import and apply the locale

import { pt } from '@mediahuis/chameleon-react/locale';

// Pass the locale to the component
<DatePicker locale={pt} value={new Date()} />;

required

Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.

• Installation
• Properties
  • locale
  • required