Datepicker
Datumväljare(Datepicker) används för att välja ett datumintervall eller ett specifikt datum i formulär eller sökningar. Datumväljaren kan användas för att välja ett specifikt datum, en månad eller ett år. Ofta finns någon begränsning i vilka datum som är tillåtna för det specifika användningsområdet.
Datumväljaren består av ett inmatningsfält för att skriva in datum och en knapp som öppnar en popup-kalender med datum som kan väljas. Det går att växla mellan dag, månad och år i popup-kalendern. Det är rekommenderat att låta användarna skriva in datum från tangentbordet eftersom det snabbar upp interaktionen. Datumväljaren accepterar flera format på datum, men det finns en platshållare i inmatningsfältet som är tänkt att leda användaren till att mata in på det snabbaste formatet. Om användaren matar in ett format som inte accepteras ges ett felmeddelande.
För att datumväljaren ska bli förståelig för användare som använder skärmläsare rekommenderas att alltid associera datumväljaren med en rubrik som beskriver vad datumet som ska väljas är till för, t.ex. 'Giltighet, startdatum'. Om ingen rubrik associeras kommer skärmläsaren läsa upp platshållartexten i datumväljaren.
- Datumväljaren består av ett inmatningsfält (input) och ikon som visar att det är en kalender.
- Datumväljaren gör det möjligt att välja dag, månad och år.
- I inmatningsfältet visas en platshållare som indikerar önskad format – ÅÅMMDD.
- Förvalt är att textinmatning av datum tillåts. Vid klick på kontrollen ställer sig markören i textfältet och kalendervyn öppnas. När fältet är fokuserat, kan man börja skriva in text. Platshållaren visas tills användaren skrivit in något.
- Val av datum väljer och stänger kalender.
- Om inget datum är valt ska kalenderns position vara på dagens datum. Om idag ej ligger inom max/min, visas den första vy som innehåller valbara datum.
- Tillåtna format är:
- I siffror: ÅÅÅÅ-MM-DD, ÅÅ-MM-DD, ÅÅÅÅMMDD, ÅÅMMDD, ÅÅÅÅ MM DD, ÅÅ MM DD
- I text: mån ÅÅÅÅ, mån. ÅÅÅÅ, månad ÅÅÅÅ (och motsv. med ÅÅ)
- Felmeddelande ges om ogiltigt datumformat matas in. Inget datum väljs.
- Det går att konfigurera datumväljaren så att det bara går att välja datum/månad/år från kalendervyn (inte mata in med tangentbord).
- Det går att konfigurera datumväljaren så att endast en viss nivå väljs, alltså datum, månad eller år.
- Det är möjligt att konfigurera så att textinmatning inte tillåts. Vid klick på kontrollen öppnas popup-kalendern.
- Det går att ställa in min- och maxdatum för ett datumintervall men standard är att intervallet är oändligt.
- Det går att ställa in ett förvalt datum i datumväljaren.
- Det går att från datumvyn klicka på texten för månad och zooma ut till en månadsväljare (och sedan tillbaka)
- Det går att från månadsvyn klicka på året och zooma ut till en årsväljare (och sedan tillbaka).
- Vid klick på popup-kalenderns bakgrund "försvinner" fokus. Det är möjligt att använda piltangenterna för att börja navigera bland alternativen igen.
- Man ska kunna lägga in datepicker i angular reactive forms.
- Använda Angular Validators och fungera och se ut som innan.
- Man ska kunna använda validator.required.
- Datumväljaren följer färgtema.
- Datumväljaren har en fast höjd på 30 px.
- Under brytgränsen är datumväljaren 170 px bred.
- Alternativ i popup-kalendern kan ha följande lägen: inactive, current (idag/denna månad/detta år), selected, focused och hover.
- Vid övergång mellan aktivt och inaktivt läge skall den animeras med fade.
- I readonly visas samma text, men ram försvinner.
- Om inget är valt i readonly/låst-läge skall det vara blankt (vit yta).
- Platshållartexten följer "zoom-level" så om man valt t.ex. att bara visa månader kommer förväntat format följa med. Alltså januari 2019 istället för 2019-01-01.
- Hover på texten i "headern" i popup-kalendern gör så att texten blir fet. Står det januari 2019 blir det januari 2019 på hover.
- I årsvyn visas 9 år, innevarande år är i mitten.
- En rubrik kan kopplas till datumväljaren.
- När komponenten är i fokus, läser skärmläsaren:
- Om den saknar rubrik: Läs platshållartext.
- Om den har en rubrik, läses både rubrik och innehåll.
- När datumväljaren är fokuserad och man trycker Enter öppnas en popup-kalender med val av datum (eller månad eller år beroende på vad man valt att visa) och fokus flyttas till dagens datum/närmsta valbara/valt datum.
- Escape stänger popup-kalendern utan förändring och fokus hamnar på datumväljaren.
- Piltangenterna används för att navigera mellan olika alternativ i popup-kalendern.
- Om man når slutet på en rad hoppar man till nästa/föregående datum.
- Är det första/sista valet navigeras man till föregående/nästkommande period. "Nästa" alternativ är valt, ex. från 31 jan kommer man till 1 feb, mars till april, 2018 till 2019 osv.
- Om man går uppåt eller nedåt utanför sidan, fortsätter man i den kolumnen som man var i när perioden byts.
- Pageup och pagedown skiftar månad, men behåller samma nummer på dag.
- Alt + pageup/down skiftar år, men behåller samma månad och nummer på dag, om det medges av min/max-värde.
- Enter väljer ett alternativ och stänger popup-kalendern.
- Home flyttar fokus till den första alternativet i vyn.
- End flyttar fokus till den sista alternativet i vyn.
- Tab stänger popup-kalendern utan förändring och flyttar fokus till nästa element.
- Inaktiva datumväljare ska gå att fokusera men Enter gör inget. Samma gäller för readonly.
- Tangentbordsnavigering på dagar som inte ingår i den aktuella visade månaden ska gå automatiskt till månaden och leda till dagen i nästa eller föregående månad.