chakra dayzed datepicker

Datepicker Chakra Sederhana berdasarkan Dayzed.

Setiap komponen individu menggunakan Chakra UI. Jadi itu harus menghormati semua Konfigurasi UI Chakra tanpa masalah.

Komponennya sendiri harus menggunakan beberapa perpustakaan date

Sangat disarankan untuk hanya menyalin/menempelkan kode sumber dari /src untuk menyesuaikan sesuai keinginan Anda.

Instal ketergantungan

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Benang:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Penggunaan dasar

Lajang

  import { SingleDatepicker } dari "chakra-dayzed-datepicker";

  const [tanggal, setDate] = useState(Tanggal baru());

    

Jangkauan:

Perhatikan bahwa daftar ini akan memiliki satu nilai selama proses pemilihan. Sistem Anda tidak akan berfungsi jika Anda mencoba mengontrol ini secara langsung sebagai [startDate, endDate] karena kami akan mencoba menyetel selectedDates ke [intermediateSelection] dan panjang dari selectedDates dipilih sangat berarti bagi pemilih tanggal.

  import { RangeDatepicker } dari "chakra-dayzed-datepicker";

    const [tanggal yang dipilih, settanggal yang dipilih] = useState([Tanggal baru(), Tanggal baru()]);

    

alat peragaKonfigurasi:

dateNavBtnProps diperluas dari ButtonProps dari Chakra-UI. Ini memungkinkan Anda untuk mengganti perilaku default sesuai keinginan Anda selama didukung oleh Chakra-UI.

 hariDariBulanBtnProps = {
  defaultBtnProps,
  isInRangeBtnProp,
  dipilihBtnProps,
  hari iniBtnProps}

dayOfMonthBtnProps memungkinkan Anda menyesuaikan gaya tanggal berdasarkan negara bagian.
Prioritas gaya: default < isInRange < seleted < today .

popoverCompProps mungkin berguna ketika Anda ingin mengatur beberapa gaya sederhana seperti warna teks secara global

 popoverCompProps = {
  popoverContentProps,
  popoverBodyProps}

Singkatnya:

  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {},selectBtnProps: {}, hari iniBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {}},calendarPanelProps: { wrapperProps: {}, contentProps: {}, headerProps: {}, DividerProps: {},},weekdayLabelProps: {},dateHeadingProps: {}
  }}

Contoh:

  propsConfigs={{dateNavBtnProps: { colorScheme: "blue", varian: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { background: 'blue.400',} }, isInRangeBtnProps: {warna: "kuning", }, dipilihBtnProps: {latar belakang: "blue.200",warna: "hijau", }, hari iniBtnProps: {latar belakang: "teal.400", }},inputProps: { ukuran: "sm"},popoverCompProps: { popoverContentProps: {latar belakang: "gray.700 ",warna: "putih", },},calendarPanelProps: { wrapperProps: {borderColor: 'green', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', }, DividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'},dateHeadingProps: { fontWeight: 'semibold'}
  }}

konfigurasi:

Konfigurasi yang tidak terkait dengan Chakra:

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

alat peraga lainnya:

Nama	tunggal/rentang	Jenis	Nilai bawaan	Keterangan
nama	keduanya	rangkaian	belum diartikan	atribut nama untuk elemen
gunakanPortal	keduanya	boolean	belum diartikan	untuk mencegah gaya induk memotong atau menyembunyikan konten
defaultIsOpen	keduanya	boolean	PALSU	buka panel tanggal di awal
closeOnSelect	keduanya	boolean	BENAR	tutup panel tanggal setelah pilihan selesai
tanggal min	keduanya	Tanggal	belum diartikan	tanggal minimal
tanggal maksimal	keduanya	Tanggal	belum diartikan	tanggal maksimum
dinonaktifkanTanggal	lajang	Mengatur	belum diartikan	hanya untuk datepicker tunggal, gunakan startOfDay sebagai perbandingan, misalnya, disabledDates={new Set([startOfDay(new Date()).getTime()}

Untuk versi < [email protected] :
dayOfMonthBtnProps diperluas dari ButtonProps dan hanya memiliki dukungan selectedBg ,

  dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
  },