Date Input

Date Input widgets are Input Fields that provide a structured, segmented text-input approach to manual date entry, offering a keyboard-friendly alternative to interactive calendars. The date segments automatically localize based on the user’s region and locale.

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

export default [
  gui.inputs.dateInput('birthDate', {
    label: 'Birth Date',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date"
    }
  ]
}

Props

Use these props to customize your Date Input widget.

prop	type	description
`hint`	string	A description to display below the segmented inputs
`icon`	string	A css class to display an icon inside the input
`invalidDateMessage`	string \| Localizable	Error message shown when the completed date does not exist, e.g. February 30
`maxDate`	string	Latest allowed date (ISO date, inclusive)
`maxDateMessage`	string \| Localizable	Error message shown when the entered date is after `maxDate`
`minDate`	string	Earliest allowed date (ISO date, inclusive)
`minDateMessage`	string \| Localizable	Error message shown when the entered date is before `minDate`

Hint

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

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

export default [
  gui.inputs.dateInput('birthDate', {
    hint: 'Please enter your date of birth',
    label: 'Birth Date',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date",
      "props": {
        "hint": "Please enter your date of birth"
      }
    }
  ]
}

Icon

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

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

export default [
  gui.inputs.dateInput('birthDate', {
    icon: 'calendar_month',
    label: 'Birth Date',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date",
      "props": {
        "icon": "calendar_month"
      }
    }
  ]
}

Min and Max Dates

Use the properties minDate and maxDate (ISO dates, both inclusive) to specify the boundaries for accepted dates. A completed date outside the boundaries raises an input error instead of a value; customize (and localize) the messages with minDateMessage and maxDateMessage.

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

export default [
  gui.inputs.dateInput('appointmentDate', {
    hint: 'Appointments available between 2026-02-01 and 2026-07-31',
    minDate: '2026-02-01',
    maxDate: '2026-07-31',
    minDateMessage: 'No appointments before February 2026',
    maxDateMessage: 'No appointments after July 2026',
    label: 'Appointment Date',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "dateInput",
      "path": "appointmentDate",
      "label": "Appointment Date",
      "props": {
        "hint": "Appointments available between 2026-02-01 and 2026-07-31",
        "minDate": "2026-02-01",
        "maxDate": "2026-07-31",
        "minDateMessage": "No appointments before February 2026",
        "maxDateMessage": "No appointments after July 2026"
      }
    }
  ]
}

Invalid Date

Use the property invalidDateMessage to customize (and localize) the error shown when the completed segments don’t form a real calendar date, such as February 30 or the 13th month.

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

export default [
  gui.inputs.dateInput('birthDate', {
    hint: 'Try a date that doesn\'t exist, e.g. February 30',
    invalidDateMessage: 'Please enter a real calendar date',
    label: 'Birth Date',
  }),
];

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date",
      "props": {
        "hint": "Try a date that doesn't exist, e.g. February 30",
        "invalidDateMessage": "Please enter a real calendar date"
      }
    }
  ]
}

Styling

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-text-default`	Active piece (day/month/year) visual underline color and standard focus shadow

Anatomy

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

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

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