Range Date Input

Range Date Input components are Input Fields that allow the user to enter multiple date ranges using segmented keyboard inputs. Each completed range is displayed as a pill that can be removed. The date segments automatically localize based on the user’s region and locale.

Programmatic
JSON

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

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

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

Props

Use these props to customize your Range Date Input component.

prop	type	description
`hint`	string	A description to display below the input
`icon`	string	A css class to display an icon inside the input
`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`

Hint

Use the property hint to add a description or validation instructions.

Programmatic
JSON

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

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

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDateInput",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "hint": "Enter one or more date ranges"
      }
    }
  ]
}

Icon

Use the property icon to add an icon to the component. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed inside the input border.

Programmatic
JSON

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

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

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDateInput",
      "path": "dateRanges",
      "label": "Date Ranges",
      "props": {
        "icon": "calendar_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: 'rangeDateInput',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        separator: 'to',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "rangeDateInput",
      "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: 'rangeDateInput',
      path: 'dateRanges',
      label: 'Date Ranges',
      props: {
        removePillAriaLabel: 'Delete range',
        startDateAriaLabel: 'From date',
        endDateAriaLabel: 'To date',
      },
    },
  ],
});

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

Styling

Range Date Inputs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
`--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
`--gui-intent-primary`	Pill background color
`--gui-color-white`	Pill text and remove button color
`--gui-border-default`	Pills wrapper border and separator border color
`--gui-bg-default`	Scroll shadow gradient color and dropdown background color
`--gui-text-default`	Active piece (day/month/year) visual underline color
`--gui-radius-md`	Pill and dropdown border radius
`--gui-radius-full`	Pill count button and remove button border radius

Anatomy

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

<gui-range-date>
  <label for="fieldUid">
    Label
    <div class="gui-range-date__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <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>

    <div class="gui-range-date-input__pills-dropdown" role="list">
      <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>
    </div>
  </div>
</gui-range-date>