Date Input

Date Input components 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.

dateinput.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'dateInput',
      path: 'birthDate',
      label: 'Birth Date',
    },
  ],
});

dateinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date"
    }
  ]
}

Props

Use these props to customize your Date Input component.

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

Hint

Note

A label is required for the hint to be displayed.

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

dateinput.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'dateInput',
      path: 'birthDate',
      label: 'Birth Date',
      props: {
        hint: 'Please enter your date of birth',
      },
    },
  ],
});

dateinput.json

{
  "form": [
    {
      "uid": "",
      "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 component. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed inside the input border.

dateinput.ts

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

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

dateinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "dateInput",
      "path": "birthDate",
      "label": "Birth Date",
      "props": {
        "icon": "calendar_month"
      }
    }
  ]
}

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 Component in case you want to use your CSS styles.

dateinput-anatomy.html

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