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.

range-date-input.ts

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

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

range-date-input.json

{
  "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

Note

A label is required for the hint to be displayed.

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

range-date-input.ts

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',
      },
    },
  ],
});

range-date-input.json

{
  "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.

range-date-input.ts

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

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

range-date-input.json

{
  "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 -.

range-date-input.ts

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

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

range-date-input.json

{
  "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.

range-date-input.ts

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',
      },
    },
  ],
});

range-date-input.json

{
  "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.

range-date-input-anatomy.html

<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>