Pemilih Tarikh

Penggunaan

Import

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

Anatomi

export default () => <DatePicker />;

Contoh

Saiz

Gunakan prop size untuk menukar saiz pemilih tarikh!

Keadaan Tidak Terkawal vs Terkawal

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

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

Tidak Terkawal

Terkawal

Dilumpuhkan

Terdapat banyak cara untuk berinteraksi dengan keadaan disabled Pemilih Tarikh. Pemilih 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 hari ini

Lumpuhkan tarikh selepas hari ini

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 tarikh dengan menghantar prop minYear dan maxYear.

Susunan Tahun

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

Menaik

Menurun

Bahasa

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

DatePicker

Prop	Type	Default
`size`	`enum`	`small`
`defaultValue`	`Date`	-
`value`	`Date`	-
`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