Gå til sidens indhold

Udvidelser

Datovælger (datepicker)

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

<div class="container">

    <div class="form-group ">
        <fieldset>
            <legend><label
                    class="form-label icon-link">Indsendelsesfrist</label>
                <span class="form-hint">For eksempel: 05 12 2018</span>
            </legend>
            <span class="form-error-message"
                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_of_day_2">Dag</label>
                    <input class="form-input js-calendar-day-input"
                        id="date_of_day_2" value="" type="tel" min="1"
                        max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                        data-input-regex="^[0-9]{0,2}$"
                        title="Indskriv dag på månenden som tal" />
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label"
                        for="date_of_month_1">Måned</label>
                    <input class="form-input js-calendar-month-input"
                        id="date_of_month_1" value="" type="tel" min="1"
                        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_of_year_3">År</label>
                    <input class="form-input js-calendar-year-input"
                        id="date_of_year_3" value="" type="tel" min="1900"
                        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>

</div>

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

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.

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