Gå til sidens indhold

Kode

Pikaday

Gør det muligt for brugeren, at vælge en dato ved klik på knap.

For eksempel: 05 12 2018
<div class="form-group  ">
    <fieldset>
        <legend><label class="form-label">Indsendelsesfrist</label>
            <span class="form-hint">For eksempel: 05 12 2018</span>
        </legend>
        <span class="form-error-message  d-none"
            id="form-error-message-input-error" role="alert"></span>
        <div class="date-group js-calendar-group mt-3">
            <div class="form-group form-group-day">
                <label class="form-label" for="date-day">Dag</label>
                <input class="form-input js-calendar-day-input"
                    id="date-day" value="" type="tel" data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv dag på måneden som tal" />
            </div>
            <div class="form-group form-group-month">
                <label class="form-label" for="date-month">Måned</label>
                <input class="form-input js-calendar-month-input"
                    id="date-month" value="" type="tel" data-min="1"
                    data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv månedens nummer" />
            </div>
            <div class="form-group form-group-year ">
                <label class="form-label" for="date-year">År</label>
                <input class="form-input js-calendar-year-input"
                    id="date-year" value="" type="tel" data-min="1900"
                    data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$"
                    title="Indskriv årstal" />
            </div>

            <button
                class="button-unstyled button-open-calendar js-calendar-datepicker">
                <span class="sr-only">Åben kalenderen</span>
                <svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#calendar"></use></svg>
            </button>

        </div>
    </fieldset>
</div>

Implementering

Installer dkfds-plugins fra npm og inkludér enten CSS eller SCSS filen for pluginnet i dit projekt. For mere info, se implementeringaf DKFDS.

Stien til filen du skal inkludere for Pikaday er henholdsvis [path-to-plugins-project]/dist/css/dkfds-pikaday-theme.standalone.min.css for CSS filen og ~dkfds-plugins/dist/scss/dkfds-pikaday-theme for SCSS filen.

Man skal dog stadig inkludere Pikadays egen CSS og JavaScript. Følg Pikadays egen dokumentation for implementering af pluginnet i dit projekt.

Retningslinjer

Brugervenlighed

Anvendes til

Når der er specifikt udvalgte datoer at vælge i mellem som fx ved bookninger og planlægning med åbne og lukkede datoer, og hvor det gavner brugeren at se hvilke ugedage forskellige datoer rammer.

Anvendes ikke til

Tidsangivelser som er givet for brugeren, som fx en fødselsdato. Brug da komponenten datoangivelse