Datepicker

TIP

jQuery UI js-datepicker.

Datepicker in Modal (Panel)

TIP

To use the datepicker in a dialog or modal, you must add the attribute data-additional-class="-in-modal" to ensure the datepicker appears with the correct z-index.

Premium Datepicker

Verwendbar bis...

Show Code

<button class="c-btn -secondary -small" data-target="#modal-example">
  Open Modal
</button>
<div id="modal-example" class="c-panel -is-modal -is-medium -has-close-btn -close-backdrop">
  <div class="c-panel__inner">
    <h4 class="m-b-s">
      Premium Datepicker
    </h4>

    <div class="c-float-container -has-datepicker -has-icon">
      <div class="c-float-container__icon">
        <span class="far fa-calendar"></span>
      </div>

      <label class="c-label" for="datepicker1">Verwendbar bis...</label>
      <input type="text" class="c-input -icon js-datepicker" data-additional-class="-in-modal" id="datepicker1" name="datepicker1" value="" />
    </div>
  </div>
</div>

Default Datepicker

WARNING

The Theme Switcher doesn't work for the datepicker dropdown, since the theme-class is being added dynamically before the initialization of Datepicker.

.c-input.js-datepicker

Verwendbar bis...

<div class="c-float-container -has-datepicker -has-icon">
  <div class="c-float-container__icon">
      <i class="far fa-calendar" aria-hidden="true"></i>
  </div>
  <label class="c-label" for="datepicker1">Verwendbar bis...</label>
  <input type="text" class="c-input -icon js-datepicker" id="datepicker1" name="datepicker1" value="" />
</div>

Datepicker with Range

.c-float-container-group > .c-float-container.-has-datepicker > ...

Verwendbar von...

bis...

<div class="h-flex h-highlight-block c-float-container-group">
  <div class="c-float-container -light -has-datepicker -has-icon">
    <div class="c-float-container__icon">
      <span class="far fa-calendar"></span>
    </div>
    <label class="c-label -redesign" for="verwendbar-from-date">Verwendbar von...</label>
    <input type="text" class="c-input -icon -redesign js-verwendbar-bis-input js-verwendbar-bis-from-date js-datepicker" id="verwendbar-from-date" name="verwendbar-from-date" value="" />
  </div>
  <div class="c-float-container -light -has-datepicker">
    <label class="c-label -redesign " for="verwendbar-to-date">bis...</label>
    <input type="text" readonly class="c-input -icon -redesign js-verwendbar-bis-input js-verwendbar-bis-to-date js-datepicker" id="verwendbar-to-date" name="verwendbar-to-date" value="" />
  </div>
</div>