Date Picker Button

The Date Picker Button is a Popover widget which allows for either a single date or a date range selection.

There are two types of date ranges: static and dynamic. The difference between them is that dynamic date ranges are relative to today's date, while static date ranges are fixed regardless of time. If users choose one of the specified date ranges on the period selector sidebar, except of Custom, they start working with dynamic date ranges. Interacting directly on the calendar lets deal with static date ranges.

Example

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

Result

Variants

Calendar type

You can choose between Static dates and Rolling period calendar type using calendarType prop. Default is Rolling period.

Static dates is as the name suggests is the fixed date range, whereas Rolling period is period range from the currentDate.

note

Please note that the in Custom Dates in Datepicker with Rolling period is just the visual representation.

To use the rolling featuer with custom date, please use the hook created in Datascape

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const [calendarType, setCalendarType] = useState('rolling');

  const { startDate, endDate, period } = dateRange;
  const [date, setDate] = useState('April 5 2024');

  const onApply = (dateObj, calType) => {
    setDateRange(dateObj);
    setCalendarType(calType);
  };

  return (
    <>
      <Input
        value={date}
        onChange={(e) => setDate(e.target.value)}
        label="Current Date"
      />
      <DatePickerButton
        startDate={startDate}
        endDate={endDate}
        period={period}
        onApply={onApply}
        calendarType={calendarType}
        currentDate={date}
      />
    </>
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const [calendarType, setCalendarType] = useState('rolling');

  const { startDate, endDate, period } = dateRange;
  const [date, setDate] = useState('April 5 2024');

  const onApply = (dateObj, calType) => {
    setDateRange(dateObj);
    setCalendarType(calType);
  };

  return (
    <>
      <Input
        value={date}
        onChange={(e) => setDate(e.target.value)}
        label="Current Date"
      />
      <DatePickerButton
        startDate={startDate}
        endDate={endDate}
        period={period}
        onApply={onApply}
        calendarType={calendarType}
        currentDate={date}
      />
    </>
  );
}

Result

Custom Current Date

You can pass currentDate. Its value will be assigned to "today" and relative dates will be calculated relatively to it.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      currentDate="Jan 28 2023"
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      currentDate="Jan 28 2023"
    />
  );
}

Result

Custom Dates Formatting

You can use a customDateFormat property to format dates inside trigger button as you will.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const customDateFormat = (date) => {
    return date.toLocaleDateString();
  };

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      customDateFormat={customDateFormat}
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const customDateFormat = (date) => {
    return date.toLocaleDateString();
  };

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      customDateFormat={customDateFormat}
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

Result

Date and time formatting and hourly periods

You can use showTime property to show dates with date-time format. Also, when showTime is provided, we include hourly relative periods in popover side menu. Current hourly relative periods supported are: last-hour, two-hours-ago and last-24-hours.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      showTime
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      showTime
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
    />
  );
}

Result

Data-TestId

We have the support for custom data-test using the prop: dataTestId.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      dataTestId="my-test-id"
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      dataTestId="my-test-id"
    />
  );
}

Result

Disabled

You can use prop disabled to disabled the selection.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      disabled
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      disabled
    />
  );
}

Result

Hide Clear Button

You can hide the clear button with isClearButtonHidden prop.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      isClearButtonHidden
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      isClearButtonHidden
    />
  );
}

Result

onClear callback

you can use onClear to run a function when clear button is clicked

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  const clearCallback = () => {
    console.log('I am Clear Button Callback!');
  };

  return (
    <DatePickerButton
      showTime
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      onClear={clearCallback}
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  const clearCallback = () => {
    console.log('I am Clear Button Callback!');
  };

  return (
    <DatePickerButton
      showTime
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      onClear={clearCallback}
    />
  );
}

Result

Relative Date Options Formatting

You can use a relativeDateOptions property to manage the Date Options.

The props accepts only array of Period, an ENUM from DatePickerButton utils.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;
  const { Today, Yesterday, Last7Days } = Period;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      relativeDateOptions={[Today, Yesterday, Last7Days]}
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;
  const { Today, Yesterday, Last7Days } = Period;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      relativeDateOptions={[Today, Yesterday, Last7Days]}
    />
  );
}

Result

Full width trigger

You can use isFullWidthTrigger property to allow the trigger to take the available width.

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      isFullWidthTrigger
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      isFullWidthTrigger
    />
  );
}

Result

Translate

You can use a getElementLabel property to define the text for all available elements within the DatePicker. This function will be called with one of the following values as an argument:

type DatePickerButtonTextElements =
  | 'last-hour'
  | 'two-hours-ago'
  | 'today'
  | 'yesterday'
  | 'last-7-days'
  | 'last-14-days'
  | 'last-30-days'
  | 'last-3-months'
  | 'this-month'
  | 'last-month'
  | 'this-week'
  | 'last-week'
  | 'custom'
  | 'start-date-label'
  | 'end-date-label'
  | 'cancel-button'
  | 'apply-button'
  | 'clear-button'
  | 'static'
  | 'static-dates'
  | 'static-dates-description'
  | 'rolling'
  | 'rolling-period'
  | 'rolling-period-description';

Each value matches the element within the DatePicker, e.g. 'apply-button' specifies the label for the Apply button etc.

Also, you will need to use the locale prop to set a localized version of the Months and Date Range values.

Do:

Always provide locale code with the locale prop to the component when using the getElementLabel prop.

info

Supported languages:

English (Default), Chinese, French, German, Japanese, Korean, Portuguese, Russian, Spanish, Turkish, Vietnamese

Live Editor

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const getElementLabel = (element) => {
    switch (element) {
      case 'today':
        return 'Сегодня';
      case 'yesterday':
        return 'Вчера';
      case 'last-7-days':
        return 'Последние 7 дней';
      case 'last-14-days':
        return 'Последние 14 дней';
      case 'last-30-days':
        return 'Последние 30 дней';
      case 'last-3-months':
        return 'Последние 3 месяца';
      case 'custom':
        return 'Нестандартный период';
      case 'last-week':
        return 'последняя неделя';
      case 'this-week':
        return 'текущая неделя';
      case 'last-month':
        return 'последний месяц';
      case 'this-month':
        return 'текущий месяц';
      case 'apply-button':
        return 'Сохранить';
      case 'cancel-button':
        return 'Отмена';
      case 'start-date-label':
        return 'Дата начала';
      case 'end-date-label':
        return 'Дата окончания';
      case 'clear-button':
        return 'прозрачный';
      case 'static':
        return 'статический';
      case 'static-dates':
        return 'статические даты';
      case 'static-dates-description':
        return 'Даты фиксированы';
      case 'rolling':
        return 'прокатка';
      case 'rolling-period':
        return 'скользящий период';
      case 'rolling-period-description':
        return 'По мере изменения календаря даты будут обновляться.';
      default:
        return '';
    }
  };

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      getElementLabel={getElementLabel}
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      locale="ru"
      calendarType="rolling"
    />
  );
}

function MyDatePickerButton() {
  const [dateRange, setDateRange] = useState({
    startDate: undefined,
    endDate: undefined,
    period: undefined
  });

  const getElementLabel = (element) => {
    switch (element) {
      case 'today':
        return 'Сегодня';
      case 'yesterday':
        return 'Вчера';
      case 'last-7-days':
        return 'Последние 7 дней';
      case 'last-14-days':
        return 'Последние 14 дней';
      case 'last-30-days':
        return 'Последние 30 дней';
      case 'last-3-months':
        return 'Последние 3 месяца';
      case 'custom':
        return 'Нестандартный период';
      case 'last-week':
        return 'последняя неделя';
      case 'this-week':
        return 'текущая неделя';
      case 'last-month':
        return 'последний месяц';
      case 'this-month':
        return 'текущий месяц';
      case 'apply-button':
        return 'Сохранить';
      case 'cancel-button':
        return 'Отмена';
      case 'start-date-label':
        return 'Дата начала';
      case 'end-date-label':
        return 'Дата окончания';
      case 'clear-button':
        return 'прозрачный';
      case 'static':
        return 'статический';
      case 'static-dates':
        return 'статические даты';
      case 'static-dates-description':
        return 'Даты фиксированы';
      case 'rolling':
        return 'прокатка';
      case 'rolling-period':
        return 'скользящий период';
      case 'rolling-period-description':
        return 'По мере изменения календаря даты будут обновляться.';
      default:
        return '';
    }
  };

  const { startDate, endDate, period } = dateRange;

  return (
    <DatePickerButton
      getElementLabel={getElementLabel}
      startDate={startDate}
      endDate={endDate}
      period={period}
      onApply={setDateRange}
      locale="ru"
      calendarType="rolling"
    />
  );
}

Result

Props

Name	Type	Default
startDate The beginning date of the selected date range. Should be provided when working with a static date range. If 'period' prop provided it will be ignored.	Date \| null	null
endDate The end date of the selected date range. Should be provided when working with a static date range. If 'period' prop provided it will be ignored.	Date \| null	null
period Allows to set a dynamic date range. If provided 'startDate' and 'endDate' props will be ignored. To work with static date ranges it should be undefined. Please use values from `Period` enum for this prop: Today, Yesterday, Last7Days, Last14Days, Last30Days, Last3Months, LastMonth, LastWeek, ThisMonth, ThisWeek.	"last-hour" \| "two-hours-ago" \| "last-24-hours" \| "today" \| "yesterday" \| "last-7-days" \| "last-14-days" \| "last-30-days" \| "last-3-months" \| "last-month" \| "this-month" \| "last-week" \| "this-week"	—
relativeDateOptions Allows to provide Date Options, if empty provide all options	Period[]	[]
onApply The handler will be called after clicking Apply button	((dateRange: DateRange, calType?: CalendarType) => void)	—
onClear The handler will be called after clicking Clear button	(() => void)	—
getElementLabel Use this prop to override the default elements texts and labels. `DatePickerButtonTextElements` contains elements: \| 'period-today' \| 'period-yesterday' \| 'period-last-7-days' \| 'period-last-14-days' \| 'period-last-30-days' \| 'period-last-3-months' \| 'custom' \| 'start-date-label' \| 'end-date-label' \| 'cancel-button' \| 'apply-button' \| 'clear-button' \| 'this-month' \| 'last-month' \| 'this-week' \| 'last-week' \| 'static' \| 'static-dates' \| 'static-dates-description' \| 'rolling' \| 'rolling-period' \| 'rolling-period-description'	((element: DatePickerButtonTextElements) => string)	—
customDateFormat Use this function to format dates inside trigger button	((date: Date) => string)	—
minDate The earliest date the user can select	Date	—
maxDate The latest date the user can select	Date	—
currentDate The custom date to be used as the current date. If undefined, the machine current date is used.	string \| number \| Date	—
currentMonthPosition Use this prop to set the position of the current month	"left" \| "right"	"right"
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
zIndex Add z-index rule to the pop-over window	number \| "auto"	"auto"
locale Use this prop to set localization for the date values	"tr" \| "en" \| "de" \| "es" \| "fr" \| "ja" \| "ko" \| "pt" \| "ru" \| "vi" \| "zh"	"'en' as LocaleCode"
showTime Include time in date format	boolean	false
isClearButtonHidden Determines whether the clear button is hidden	boolean	false
disabled Allow to disable the selection	boolean	false
calendarType Type of Calender	"static" \| "rolling"	—
dataTestId Data-testId	string	"datepicker"
isFullWidthTrigger Allows the trigger to take the available width	boolean	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Example​

Variants​

Calendar type​

note

Custom Current Date​

Custom Dates Formatting​

Date and time formatting and hourly periods​

Data-TestId​

Disabled​

Hide Clear Button​

onClear callback​

Relative Date Options Formatting​

Full width trigger​

Translate​

Do:​

info

Props​

Related Components​

Example

Variants

Calendar type

Custom Current Date

Custom Dates Formatting

Date and time formatting and hourly periods

Data-TestId

Disabled

Hide Clear Button

onClear callback

Relative Date Options Formatting

Full width trigger

Translate

Do:

Props

Related Components