Pemilih Julat Tarikh

Penggunaan

Import

import { DateRangePicker } from "@govtechmy/myds-react/date-picker";

Anatomi

export default () => <DateRangePicker />;

Contoh

Saiz

Gunakan prop size untuk menukar saiz pemilih julat tarikh!

Keadaan Tidak Terkawal vs Terkawal

Untuk menggunakan pemilih julat tarikh dalam keadaan tidak terkawal, tetapkan prop defaultValue kepada nilai awal pemilih julat tarikh.

Untuk menggunakan pemilih julat tarikh dalam keadaan terkawal, tetapkan prop value kepada nilai semasa pemilih julat tarikh dan sediakan pendengar acara onValueChange untuk mengendalikan perubahan.

Tidak Terkawal

Terkawal

Dilumpuhkan

Terdapat banyak cara untuk berinteraksi dengan keadaan disabled Pemilih Julat Tarikh. Pemilih julat tarikh boleh dilumpuhkan sepenuhnya dengan menetapkan prop disabled kepada true.

Untuk kawalan yang lebih halus pada tarikh yang hendak dilumpuhkan, anda boleh menghantar Matcher | Matcher[] yang mentakrifkan peraturan untuk melumpuhkan tarikh.

Lumpuhkan semua tarikh

Lumpuhkan tarikh sebelum semalam

Lumpuhkan tarikh selepas esok

Lumpuhkan tarikh di luar julat

Lumpuhkan tarikh mengikut hari dalam minggu (cth. Sabtu dan Ahad)

Lumpuhkan tarikh mengikut fungsi panggilan balik (cth. lumpuhkan setiap 13hb bulan)

Tahun Maksimum dan Minimum

Anda boleh menetapkan tahun maksimum dan minimum untuk pemilih julat tarikh dengan menghantar prop minYear dan maxYear.

Susunan Tahun

Anda boleh menetapkan susunan pengisihan tahun dalam dropdown tahun dengan menghantar prop yearOrder.

Menaik

Menurun

Locale

Komponen ini menyokong dwibahasa, anda boleh menghantar prop locale untuk menetapkan bahasa digunakan.

Nilai lalai adalah en untuk English. Untuk menukar kepada Bahasa Melayu, tetapkan ms.

English

Bahasa Melayu

Props

DateRangePicker

Prop	Type	Default
`size`	`enum`	`small`
`defaultValue`	`boolean \| indeterminate`	`false`
`value`	`boolean \| indeterminate`	`false`
`onValueChange`	`(date: Date ) => void`	-
`placeholder`	`string`	`dd / mm / yyyy`
`disabled`	`boolean \| Matcher \| Matcher[]`	`false`
`maxYear`	`number`	`2099`
`minYear`	`number`	`1900`
`yearOrder`	`asc \| desc`	`asc`
`locale`	`en \| ms`	`en`

MYDS