Date Picker

Date Picker components are Input Fields that combine the functionality of a Date Input and a Calendar. They allow the user to swiftly type a date using their keyboard or to open a drop-down calendar popover to select a date visually.

date-picker.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'datePicker',
      path: 'startDate',
      label: 'Start Date',
    },
  ],
});

date-picker.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "datePicker",
      "path": "startDate",
      "label": "Start Date"
    }
  ]
}

Props

Use these props to customize your Date Picker component. The Date Picker inherits all data-entry properties from the Date Input and formatting options from the 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)
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

Note

A label is required for the hint to be displayed.

Use the property hint to add descriptive text.

date-picker.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'datePicker',
      path: 'startDate',
      label: 'Start Date',
      props: {
        hint: 'Provide a start date to calculate your quote.',
      },
    },
  ],
});

date-picker.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "datePicker",
      "path": "startDate",
      "label": "Start Date",
      "props": {
        "hint": "Provide a start date to calculate your quote."
      }
    }
  ]
}

Icon

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

date-picker.ts

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

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

date-picker.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "datePicker",
      "path": "startDate",
      "label": "Start Date",
      "props": {
        "icon": "calendar_month"
      }
    }
  ]
}

Custom Icons

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

date-picker.ts

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

export default golemForm().create({
  form: [
    {
      uid: 'date-picker-icons',
      kind: 'input',
      type: 'datePicker',
      path: 'date',
      label: 'Custom Icons Date Picker',
      props: {
        prevMonthIcon: 'chevron_left',
        nextMonthIcon: 'chevron_right',
        prevMonthAriaLabel: 'Go to previous month',
        nextMonthAriaLabel: 'Go to next month',
      },
    },
  ],
});

date-picker.json

{
  "form": [
    {
      "uid": "date-picker-icons",
      "kind": "input",
      "type": "datePicker",
      "path": "date",
      "label": "Custom Icons Date Picker",
      "props": {
        "prevMonthIcon": "chevron_left",
        "nextMonthIcon": "chevron_right",
        "prevMonthAriaLabel": "Go to previous month",
        "nextMonthAriaLabel": "Go to next month"
      }
    }
  ]
}

Styling

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

CSS Variables

Following you will find a list with the CSS Variables specific to the Date Picker popover positioning and toggle.

CSS Variable	Description
--gui-radius-md	Interactive calendar container and day button border radius
--gui-bg-default	Interactive calendar background color
--gui-border-default	Interactive calendar border color
--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 background color
--gui-intent-primary-hover	Today’s day border color
--gui-border-default	Hover day border color

Anatomy

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

date-picker-anatomy.html

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

    <div class="gui-widget" aria-expanded="true">
      <div class="gui-date-input gui-calendar--icon" role="group">

        <div class="gui-date-input__touch-target">
          <input type="text" inputmode="numeric" class="gui-date-input__part" data-type="month" maxlength="2" placeholder="mm" tabindex="0" value="12">
          <div class="gui-date-input__visual-underline"></div>
        </div>
        <span class="gui-date-input__separator">/</span>

        <div class="gui-date-input__touch-target">
          <input type="text" inputmode="numeric" class="gui-date-input__part" data-type="day" maxlength="2" placeholder="dd" tabindex="-1" value="25">
          <div class="gui-date-input__visual-underline"></div>
        </div>
        <span class="gui-date-input__separator">/</span>

        <div class="gui-date-input__touch-target">
          <input type="text" inputmode="numeric" class="gui-date-input__part gui-date-input__year" data-type="year" maxlength="4" placeholder="yyyy" tabindex="-1" value="2024">
          <div class="gui-date-input__visual-underline"></div>
        </div>

      </div>

      <span class="gui-widget-icon fas fa-calendar-alt"></span>

      <gui-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">December 2024</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-calendar>
    </div>
  </gui-date-picker>
</div>