search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
7 stars 1 forks source link

Date picker #35

Open usethetics opened 3 years ago

usethetics commented 3 years ago

Description

A (custom) datepicker component.

Use when

Don’t use when

usethetics commented 3 years ago

Document when to use a custom or a native input type="date" component.

usethetics commented 3 years ago

Potential variant, datepicker with expanded time planner.

Screenshot 2021-01-13 at 14 30 00

macedvisioned commented 3 years ago

Forms conventions are mentioned here

https://github.com/nl-design-system/backlog/issues/112

Design tips

https://webaim.org/techniques/forms/

Use when: have to fill in a date input value with a pattern that shows how to fill in a date or a datepickervalue

Don't use: when you want to fill in multi lines of text until a maximum of 5000 characters.

Note:

Date fields formatting according to WCAG guidelines

<!--Datumveld met patroon-->
<h2>Date fields formatting according to WCAG guidelines</h2>
<p>Single date fields with pattern placeholder</p>  
<input name="ddTestresultaten" type="date" id="ddTestresultaten" title="Datum van aanmaak testresultaten" class="generic-input question-control" aria-describedby="ariadescID" placeholder="">
<hr>
<!--Datumprikker met keyboard accessibility-->
<h2>Date fields formatting according to WCAG guidelines</h2>
<p>Date fields with datepicker input</p>    
<div class="validate-callout" aria-live="assertive" role="alert" style="top: 60px; left: 1.00001px; display: none;"><strong aria-hidden="true">Ongeldige waarde</strong><br>Vul hier de datum van de test in.<br><div class="validate-callout-co-up2" style="left: 0px;"></div><div class="validate-callout-co-up" style="left: 0px;"></div></div>

<img id="ddTestresultaten_callout-validator_0" class="callout-validator" src="/webresource with link to external js or css file" alt="Vul hier de datum van de test in.<br />" style="position: absolute; z-index: 1001; top: 44px; left: 2.01524px; display: none;">
<hr>
Yolijn commented 1 year ago

Date-picker consists of date-input and calendar zie: #199
and needs rationale. It should probably not be used as a standalone, one should use date-input-group instead