Range Date Picker

Range Date Picker components are Input Fields that combine the functionality of a Range Date Input and a Range Calendar. They allow the user to swiftly type date ranges using their keyboard or to open a drop-down calendar popover to select date ranges visually. Clicking a pill or pressing Enter navigates the calendar to that range’s month.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges"
    }
  ]
}

Props

Use these props to customize your Range Date Picker component. The Range Date Picker inherits all data-entry properties from the Range Date Input and formatting options from the Range Calendar.

prop	type	description
`hint`	string	A description to display below the input fields
`icon`	string	Custom icon class to display inside the input visually (e.g. `fas fa-calendar`)
`separator`	string	The separator between start and end date fields. Defaults to `-`
`removePillAriaLabel`	string	Aria label for the remove pill action. Defaults to `Remove date`
`startDateAriaLabel`	string	Aria label for the start date field group. Defaults to `Start date`
`endDateAriaLabel`	string	Aria label for the end date field group. Defaults to `End date`
`prevMonthIcon`	string	Custom CSS class for the “previous month” button inside the calendar
`nextMonthIcon`	string	Custom CSS class for the “next month” button inside the calendar
`prevMonthAriaLabel`	string	ARIA label for the previous month button
`nextMonthAriaLabel`	string	ARIA label for the next month button

Hint

Use the property hint to add descriptive text.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        hint: 'Select one or more date ranges from the calendar.',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "hint": "Select one or more date ranges from the calendar."
      }
    }
  ]
}

Icon

Use the property icon to add an icon, which appears next to the toggle chevron.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        icon: 'calendar_month',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "icon": "calendar_month"
      }
    }
  ]
}

Custom Icons

Use the properties prevMonthIcon, nextMonthIcon, prevMonthAriaLabel, and nextMonthAriaLabel to customize the navigation buttons within the calendar popover.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        prevMonthIcon: 'chevron_left',
        nextMonthIcon: 'chevron_right',
        prevMonthAriaLabel: 'Go to previous month',
        nextMonthAriaLabel: 'Go to next month',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "prevMonthIcon": "chevron_left",
        "nextMonthIcon": "chevron_right",
        "prevMonthAriaLabel": "Go to previous month",
        "nextMonthAriaLabel": "Go to next month"
      }
    }
  ]
}

Separator

Use the property separator to customize the text displayed between the start date and end date fields. By default the separator is -.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        separator: 'to',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "separator": "to"
      }
    }
  ]
}

Aria Labels

Use the properties removePillAriaLabel, startDateAriaLabel and endDateAriaLabel to customize the accessibility labels for screen readers. These properties are localizable.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'rangeDatePicker',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        removePillAriaLabel: 'Delete range',
        startDateAriaLabel: 'From date',
        endDateAriaLabel: 'To date',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDatePicker",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "removePillAriaLabel": "Delete range",
        "startDateAriaLabel": "From date",
        "endDateAriaLabel": "To date"
      }
    }
  ]
}

Styling

Range Date Pickers can be styled as explained in the Styling Guide. Because they are composite components, they utilize variables from textinput, rangedateinput, and rangecalendar.

CSS Variables

Following you will find a list with the CSS Variables specific to the Range Date Picker popover positioning and toggle, plus those inherited from its sub-components.

CSS Variable	Description
`--gui-radius-md`	Interactive calendar container, day button, and pill border radius
`--gui-bg-default`	Interactive calendar background color
`--gui-border-default`	Interactive calendar border color, hover day border, pills wrapper border
`--gui-space-3`	Internal padding within the calendar view and day buttons
`--gui-text-default`	Input text color and day buttons text color
`--gui-bg-disabled`	Disabled day background color
`--gui-intent-primary`	Selected day and pill background color
`--gui-intent-primary-hover`	Today’s day border color
`--gui-intent-error`	Border and focus shadow color when invalid
`--gui-border-focus`	Border color when a pill or input is focused
`--gui-shadow-focus`	Box shadow when a pill or input is focused

Anatomy

This is the anatomy of the Range Date Picker Component in case you want to use your CSS styles.

<div class="gui-form">
  <gui-range-date-picker>
    <label for="fieldUid">
      Label
      <div class="gui-widget-hint" id="fieldUid_hint">Hint</div>
    </label>

    <div class="gui-widget" aria-expanded="true">
      <gui-range-date>
        <div class="gui-range-date-input gui-range-date-input--icon" role="group">
          <span class="gui-widget-icon calendar_month"></span>

          <div class="gui-range-date-input__pills-wrapper">
            <div class="gui-range-date-input__pills" role="list">
              <span class="gui-sentinel gui-sentinel__start"></span>
              <div class="gui-range-date-input__pill" role="listitem" tabindex="0">
                <span class="gui-range-date-input__pill-text">01/01/2025 - 01/31/2025</span>
                <button type="button" class="gui-range-date-input__pill-remove" tabindex="-1">&times;</button>
              </div>
              <span class="gui-sentinel gui-sentinel__end"></span>
            </div>
          </div>

          <div class="gui-range-date-input__pills-compact">
            <button type="button" class="gui-range-date-input__pill gui-range-date-input__pill--count">1</button>
          </div>

          <div class="gui-range-date-input__inputs">
            <div class="gui-range-date-input__field" role="group" aria-label="Start date">
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part" data-type="month" data-group="start" maxlength="2" placeholder="mm" tabindex="0">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
              <span class="gui-range-date-input__separator">/</span>
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part" data-type="day" data-group="start" maxlength="2" placeholder="dd" tabindex="-1">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
              <span class="gui-range-date-input__separator">/</span>
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part gui-range-date-input__year" data-type="year" data-group="start" maxlength="4" placeholder="yyyy" tabindex="-1">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
            </div>

            <span class="gui-range-date-input__separator">-</span>

            <div class="gui-range-date-input__field" role="group" aria-label="End date">
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part" data-type="month" data-group="end" maxlength="2" placeholder="mm" tabindex="-1">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
              <span class="gui-range-date-input__separator">/</span>
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part" data-type="day" data-group="end" maxlength="2" placeholder="dd" tabindex="-1">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
              <span class="gui-range-date-input__separator">/</span>
              <div class="gui-range-date-input__touch-target">
                <input type="text" inputmode="numeric" class="gui-range-date-input__part gui-range-date-input__year" data-type="year" data-group="end" maxlength="4" placeholder="yyyy" tabindex="-1">
                <div class="gui-range-date-input__visual-underline"></div>
              </div>
            </div>
          </div>
        </div>
      </gui-range-date>

      <gui-range-calendar>
        <div class="gui-calendar-input">
          <div class="gui-calendar__header">
            <button class="gui-button gui-calendar__month-button gui-calendar__month-button--prev" type="button">&lt;</button>
            <span aria-live="polite">January 2025</span>
            <button class="gui-button gui-calendar__month-button gui-calendar__month-button--next" type="button">&gt;</button>
          </div>
          <div class="gui-calendar__days-grid" role="grid">
            <!-- Calendar grid -->
          </div>
        </div>
      </gui-range-calendar>
    </div>
  </gui-range-date-picker>
</div>