Date Picker Week

5.1.20

The Date Picker Week lets the user select a date in a calendar week format.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

autoSelect

booleanAuto focus date picker button after animation

customAttribute

{ attribute: string; value: string | number }Prop for test. Clickable and requested subcomponents will get suffixed with "-[ComponentName]"

disabledDates

string[]

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

lang

InputLanguageLanguage used for internal translations.

maxDate

string

minDate

string

numberOfDays

"7" | "9" | "11" | "13" | "15" | "17"

onAnimationStart

(dates: string[]) => void

onChange *

(value: string) => void

showCalendarButton

boolean

showDateString

boolean

showNavButtons

booleanShow prev/next navigation buttons

value *

string

Installation

npm install @sj-ab/component-library.ui.date-picker-week

Länkar

Best practices

Adaptive design

Adaptive design

Tillgänglighet

Semantik

DatePickerWeek presenteras för hjälpmedel som en uppsättning med knappar:

<button type="button" aria-pressed="true">Valt datum. söndag 5:e maj</button>
<button type="button">måndag 6:e maj</button>
<button type="button">tisdag 7:e maj</button>
<button type="button">onsdag 8:e maj</button>
<button type="button">torsdag 9:e maj</button>

Dagar som redan varit och som är nedgråade är dolda helt och hållet för hjälpmedel med aria-hidden

Responsivitet och textförstoring

Date Picker Week kan hantera textförstoring på olika skärmbredder genom att automatiskt anpassa antalet dagar som visas. På små skärmar visas färre dagar och på större skärmar visas fler i mån av plats.

Skärmbild med 200% textförstoring på liten skärm med 3 dagar som visas

Change log

Statistik

  • Importer av Date Picker Week

    8

  • Repos med Date Picker Week

    25%

  • Senaste installerade version av Date Picker Week

    5.1.14

  • Äldsta installerade version av Date Picker Week

    5.0.18