PatternLab (0.1.259)

# Datepicker

TIP

jQuery UI js-datepicker.

# 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

hide code 
<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" id="datepicker1" name="datepicker1" value="" />
</div>

# Datepicker with Range

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

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

← Dropdown →