DatePicker

The DatePicker control is a combination of an input text field and a drop-down calendar. The calendar is shown on click in the input. A date selected in the calendar appears in the input field. You can align the popup calendar relative to the input, set the popup's width, specify the date format, set the selected date and manipulate visibility of calendar buttons.

Related resources

• Get the widget by installing the @svar-ui/react-core package.
• Check DatePicker API Reference to see the list of configuration properties and events.
• Explore the samples to visualize the available features.

Initialization

To create a DatePicker instance on a page, you need to complete two steps:

• import the source file of the control on a page:

import { DatePicker } from "@svar-ui/react-core";

• apply the <DatePicker> element to render a date picker:

<DatePicker />

A default date picker is initialized with no date selected.

Setting the value

You can select a particular date in the calendar and show it in the input of a date picker. Use the value property for this purpose, it accepts a Date object.

<DatePicker value={new Date(2023, 0, 17)} />

The specified date will appear in the date picker input and the day will be highlighted in the calendar, if visible.

Related sample: DatePicker

Getting the current value

You can get the current value of the DatePicker control. For this, you need to:

• declare a state variable that will contain the control's value (it may contain the initial value):

import { useState } from "react";
import { DatePicker } from "@svar-ui/react-core";

const App = () => {
  const [date, setDate] = useState();
  return <DatePicker value={date} onChange={({ value }) => setDate(value)} />;
};

• pass the state variable to the value property of the control and update it in the onChange handler.

Catching the change of the selected date

In case you need to catch the change of the selected date, handle the onChange event. Inside the handler you can get the newly selected date in the following way:

function handleChange({ value }) {
  console.log(value);
  // Date object
}

<DatePicker onChange={handleChange} />

The handler function of the onChange event receives an object whose value property contains the new Date selected in the picker.

Related sample: DatePicker

Setting the date format

The default format of displaying a date in DatePicker is "%m/%d/%Y". You can change it and set your own format with the help of the format property.

<DatePicker value={new Date()} format="%d %F, %Y" />

SVAR DatePicker uses the date-fns library for handling dates. You can find format specifications in the corresponding article.

Related sample: DatePicker

Aligning the calendar

The popup with a calendar which appears on click in the input of DatePicker is automatically aligned to the bottom left of the input. You can control its alignment with the align property.

<DatePicker align="center" />

In the above example the popup is aligned to the center of the input field.

Related sample: DatePicker

Adjusting the calendar width

The popup of DatePicker adjusts its width to the calendar that is placed inside it. If needed, you can change the width of the popup using the width property. It works in the same way as the width CSS property. The value should be set as a string, e.g.:

<DatePicker width="100%" />

Related sample: DatePicker

Configuring buttons

Hiding the calendar buttons

The calendar of DatePicker has the Today and Clear buttons in the lower part. If needed, you can switch those buttons off. Set the buttons property to false to achieve this purpose:

<DatePicker value={new Date(2022, 2, 18)} buttons={false} />

Related sample: DatePicker

Enabling individual buttons

You can also enable only specific buttons instead of the default set. To do this, pass an array of button names to the buttons property. Possible values in the array are "clear", "today".

<DatePicker value={new Date(2022, 2, 18)} buttons={["clear"]} />

Setting the date format

The default format of displaying a date in the DatePicker input in the EN locale is "%m/%d/%Y". You can change it and set your own format with the help of the format property. Set the value of this property as a string with the format or as a function that returns a formatted string.

<DatePicker value={new Date()} format="%d %F, %Y" />

Check the characters available for specifying the date format.

Related sample: DatePicker

You can also specify the date format from the locale.

Localizing the calendar

You can translate the labels of the calendar used inside the DatePicker control. The detailed information is given at the Calendar page. Take the following simple steps:

• import the Locale object:

import { DatePicker, Locale } from "@svar-ui/react-core";

• include the necessary locales package on a page:

import { DatePicker, Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/core-locales";

• wrap the DatePicker element in the <Locale> and use the words property to set the locale:

<Locale words={cn}>
  <DatePicker />
</Locale>

Setting the date format from the locale

You can localize the format of displaying dates in the input of the DatePicker control.

To provide the desired format, you should:

• wrap a datepicker instance in the <Locale> tag and set the words property for it
• specify the formats object inside the words object and define the dateFormat property with the necessary date format set as a string. Check the characters available for specifying the date format

info

Note that dateFormat set in the <Locale> wrapper will be applied for all the controls specified within this wrapper. Thus, this way is useful for setting the date format for the whole app or a form that contains several date pickers. If you need to modify the date format of a separate date picker, you can use the format property.

For example:

import { DatePicker, Locale } from "@svar-ui/react-core";

<Locale
  words={{
    formats: { dateFormat: "%d %F, %Y" },
  }}
>
  <DatePicker value={new Date()} />
</Locale>

Customizing position of the icon

The "wxi-calendar" icon is placed in the rightmost part of the date picker input by default. You can put the icon in the leftmost part of the input (before the selected date) with the help of the css property of the control. Specify the name of the icon as "wx-icon-left":

<DatePicker value={new Date()} css="wx-icon-left" />

Related sample: DatePicker

Setting the editable state

If needed, you can make DatePicker editable using the editable property. By default the property is disabled. You can either enable it by setting the value to true:

<DatePicker editable={true} />

Or specify a custom function to apply a custom editable format, for example:

function parseDate(string) {
  const p = string.match(/(..)(..)(.+)/);
  return p ? new Date(p.slice(1, 4).join("/")) : null;
}

<Field label="Editable custom format (MMDDYYYY)">
  {(id) => <DatePicker editable={parseDate} id={id} format="%m%d%Y" />}
</Field>

Related sample: DatePicker

Adding a title

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for a date picker:

<DatePicker error align="center" title="Invalid date" />

Related sample: DatePicker

Adding a placeholder for the input

You can add a placeholder inside the date picker's input. The placeholder can contain some prompting message to make interaction with the control simpler. All you need is to set your message as a value of the placeholder property:

<DatePicker placeholder="Select a date" />

note

For a placeholder to be visible in the input, a date picker should be rendered without the initial value specified.

Setting the disabled state

Whenever you need to render a disabled date picker, you can do it with the help of the disabled property. You can either set the property to true or include it without a value (presence equals true):

<DatePicker disabled={true} />
// or
<DatePicker disabled />

Related sample: DatePicker

Adding a label

A default date picker has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> element and provide the necessary props:
  • add a desired label via the label property
  • set the position="left" property, if you want to place the label to the left of the date picker
  • the Field provides an id to its child via a render callback - use that id to link label and input

import { DatePicker, Field } from "@svar-ui/react-core";

<Field label="Select a date" position="left">
  {(id) => <DatePicker id={id} />}
</Field>

After that, render the date picker inside the <Field> and accept the id from the Field's render callback to link the controls.

Related sample: DatePicker

Styling a date validation error

When you use a date picker inside a form and a wrong date value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true:

<DatePicker error={true} />

the input's border, the selected date and the calendar icon become red. To make the label red as well, use the error property of the Field control.

import { DatePicker, Field } from "@svar-ui/react-core";

<Field label="Error" error>
  {(id) => <DatePicker error={true} id={id} />}
</Field>

Related sample: DatePicker