input datetime

The datetime input element let the user enter and edit a date in combination with a time.

The control's user interface varies from browser to browser. It was not styled by FROK (browser native behaviour).

The cross-browser input layout is different. For Chrome/Opera and Microsoft Edge it is designed in FROK style. For Firefox, we use the browser-native look and feel. Firefox also doesn't provide an interface to select the time. It has to be set directly in the input field.
According to the Web Content Accessibility Guidelines (WCAG), it is highly recommended to use a label together with the date input.
This component works with all its features only in browsers that have support for the :has CSS selector. Please refer to the reference on MDN.
If you need to run this component in a browser with no support for the :has CSS selector, please use the FROK Release 3.6.x.
table of content

component variations

input datetime

Open on blank page
<div class="a-datetime-input">
  <input type="datetime-local" id="datetime-input-1" name="input datetime" />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime readonly

Open on blank page
<div class="a-datetime-input">
  <input
    type="datetime-local"
    id="datetime-input-2"
    name="input datetime readonly"
    readonly=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime disabled

Open on blank page
<div class="a-datetime-input">
  <input
    type="datetime-local"
    id="datetime-input-3"
    name="input datetime disabled"
    disabled=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    disabled=""
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with label

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-4">Choose a time for your appointment:</label>
  <input
    type="datetime-local"
    id="datetime-input-4"
    name="input datetime with label"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with label readonly

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-5">Choose a time for your appointment:</label>
  <input
    type="datetime-local"
    id="datetime-input-5"
    name="input datetime with label readonly"
    readonly=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with label disabled

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-6">Choose a time for your appointment:</label>
  <input
    type="datetime-local"
    id="datetime-input-6"
    name="input datetime with label disabled"
    disabled=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    disabled=""
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with very long label

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-7">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="datetime-local"
    id="datetime-input-7"
    name="input datetime with very long label"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with very long label readonly

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-8">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="datetime-local"
    id="datetime-input-8"
    name="input datetime with very long label readonly"
    readonly=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with very long label disabled

Open on blank page
<div class="a-datetime-input">
  <label for="datetime-input-9">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </label>
  <input
    type="datetime-local"
    id="datetime-input-9"
    name="input datetime with very long label disabled"
    disabled=""
    value="2024-08-20T08:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    disabled=""
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with min and max date

Open on blank page
<div class="a-datetime-input">
  <input
    type="datetime-local"
    id="datetime-input-10"
    name="input datetime with min and max date"
    min="2024-05-01T08:30"
    max="2024-05-24T20:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

input datetime with min and max date over months

Open on blank page
<div class="a-datetime-input">
  <input
    type="datetime-local"
    id="datetime-input-11"
    name="input datetime with min and max date over months"
    min="2024-05-01T08:30"
    max="2024-06-30T20:30"
  />
  <button
    type="button"
    class="a-datetime-input__button"
    aria-label="open dialog"
  >
    <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
  </button>
</div>

additional content

styles SCSS

.a-datetime-input {
  @include text-field;
  display: flex;
  min-width: 11.5rem;

  @supports (-moz-appearance:none) {
    min-width: 14.5rem;
  }

  input {
    text-transform: uppercase;

    &::-webkit-datetime-edit-day-field:focus,
    &::-webkit-datetime-edit-month-field:focus,
    &::-webkit-datetime-edit-year-field:focus,
    &::-webkit-datetime-edit-hour-field:focus,
    &::-webkit-datetime-edit-minute-field:focus,
    &::-webkit-datetime-edit-ampm-field:focus {
      color: var(--neutral__enabled__front__default);
      background-color: var(--neutral__focused__fill__default);
      mix-blend-mode: multiply;
    }

    &[readonly],
    &:disabled {
      + .a-datetime-input__button {
        display: none;
      }
    }

    &::-webkit-calendar-picker-indicator {
      display: none;
    }
  }

  @supports (-moz-appearance:none) {
    &__button {
      display: none;
    }
  }
}