react datepicker

React Date Picker

Komponen datepicker yang sederhana dan dapat digunakan kembali untuk React (Demo)

Instalasi

Paket dapat diinstal melalui NPM:

 npm install react-datepicker --save

Atau melalui benang:

 yarn add react-datepicker

Anda harus menginstal React dan proptipe secara terpisah karena dependensi tersebut tidak termasuk dalam paket. Jika Anda perlu menggunakan lokal selain dari en-AS default, Anda juga perlu mengimpornya ke proyek Anda dari tanggal-FN (lihat bagian lokalisasi di bawah). Di bawah ini adalah contoh sederhana tentang cara menggunakan datePicker dalam tampilan bereaksi. Anda juga perlu meminta file CSS dari paket ini (atau menyediakan sendiri). Contoh di bawah ini menunjukkan cara memasukkan CSS dari paket ini jika sistem build Anda mendukung file CSS (Webpack adalah salah satu yang melakukannya).

 import React , { useState } from "react" ;
import DatePicker from "react-datepicker" ;

import "react-datepicker/dist/react-datepicker.css" ;

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = ( ) => {
  const [ startDate , setStartDate ] = useState ( new Date ( ) ) ;
  return (
    < DatePicker selected = { startDate } onChange = { ( date ) => setStartDate ( date ) } />
  ) ;
} ; 

Konfigurasi

Penggunaan paling mendasar dari datepicker dapat dijelaskan dengan:

 < DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } />

Anda dapat menggunakan onSelect Event Handler yang menembak setiap kali beberapa tanggal kalender telah dipilih

 < DatePicker
  selected = { date }
  onSelect = { handleDateSelect } //when day is clicked
  onChange = { handleDateChange } //only when value has changed
/>

onClickOutside Handler mungkin berguna untuk menutup DatePicker dalam mode inline

Lihat di sini untuk daftar lengkap alat peraga yang dapat diteruskan ke komponen. Contoh diberikan di situs web utama.

Pemilih Waktu

Anda juga dapat menyertakan pemilih waktu dengan menambahkan prop select showimes

 < DatePicker
  selected = { date }
  onChange = { handleDateChange }
  showTimeSelect
  dateFormat = "Pp"
/>

Waktu akan ditampilkan pada interval 30 menit secara default (default dapat dikonfigurasi melalui timer interval)

Lebih banyak contoh cara menggunakan pemilih waktu diberikan di situs web utama

Lokalisasi

Pemilih tanggal bergantung pada internasionalisasi tanggal-FNS untuk melokalisasi komponen tampilannya. Secara default, pemilih tanggal akan menggunakan set lokal secara global, yang merupakan bahasa Inggris. Disediakan adalah 3 metode pembantu untuk mengatur lokal:

• RegisterLocale (String, Object): Memuat objek lokal yang diimpor dari tanggal-fns
• setDefaultLocale (String): Mengatur lokasi terdaftar sebagai default untuk semua instance DatePicker
• getDefaultLocale : Mengembalikan string yang menunjukkan lokal yang saat ini ditetapkan.

 import { registerLocale , setDefaultLocale } from  "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )

< DatePicker
  locale = "es"
/ >

Lokal dapat diubah dengan cara berikut:

• Secara global - setDefaultLocale('es');

Kesesuaian

Bereaksi

Kami selalu berusaha untuk tetap kompatibel dengan versi React terbaru. Kami tidak dapat mendukung semua versi React yang lebih tua.

Versi terbaru yang kompatibel:

• Bereaksi 16 atau lebih baru: React-Datepicker v2.9.4 dan lebih baru
• Bereaksi 15.5: React-Datepicker v2.9.3
• React 15.4.1: Perlu React-Datepicker V0.40.0, yang lebih baru tidak akan berhasil (karena dependensi React-Onclickoutside)
• Bereaksi 0,14 atau Lebih Baru: Semua react-date-datepicker di atas.13.0
• Bereaksi 0.13: React-Datepicker v0.13.0
• Pra React 0.13: React-Datepicker V0.6.2

Momen.js

Hingga Versi 1.8.0, paket ini menggunakan momen.js. Memulai v2.0.0, kami beralih ke menggunakan date-fns , yang menggunakan objek tanggal asli, untuk mengurangi ukuran paket. Jika Anda beralih dari 1.8.0 ke 2.0.0 atau lebih tinggi, silakan lihat contoh yang diperbarui di atas periksa situs contoh untuk contoh terkini.

Dukungan Browser

Pemilih tanggal kompatibel dengan versi terbaru Chrome, Firefox, dan IE10+.

Sayangnya, sulit untuk mendukung browser warisan sambil mempertahankan kemampuan kami untuk mengembangkan fitur baru di masa depan. Untuk dukungan IE9, diketahui bahwa Polyfill Daftar Kelas diperlukan, tetapi ini dapat berubah atau pecah di titik mana pun di masa depan.

Pengembangan Lokal

Cabang main berisi versi terbaru dari komponen DatePicker.

Untuk memulai pengembangan lokal:

1. Jalankan yarn link dari root proyek
2. Jalankan cd docs-site && yarn link react-datepicker
3. Jalankan yarn install dari Project Root
4. Jalankan yarn build dari root proyek
5. Jalankan yarn start dari Root Proyek

Langkah terakhir memulai aplikasi dokumentasi sebagai server web sederhana di http: // localhost: 3000.

Anda dapat menjalankan yarn test untuk menjalankan suite test dan linter. Untuk membantu Anda mengembangkan komponen, kami telah mengatur beberapa tes yang mencakup fungsi dasar (dapat ditemukan di /tests ). Meskipun kami penggemar pengujian besar, ini hanya mencakup sepotong kecil komponen. Kami sangat menyarankan Anda menambahkan tes saat Anda menambahkan fungsionalitas baru.

Silakan merujuk ke file CONTRIBUTING.md untuk detail lebih lanjut tentang diatur.

Contohnya

Contoh -contoh di -host dalam folder Docs dan dijalankan di aplikasi sederhana yang memuat datepicker. Untuk memperluas contoh dengan contoh baru, Anda dapat dengan mudah menduplikasi salah satu contoh yang ada dan mengubah sifat unik dari contoh Anda.

Aksesibilitas

Dukungan keyboard

• Kiri : Pindah ke hari sebelumnya.
• Kanan : Pindah ke hari berikutnya.
• UP : Pindah ke minggu sebelumnya.
• Down : Pindah ke minggu depan.
• PGUP : Pindah ke bulan sebelumnya.
• Shift+PGUP : Pindah ke hari dan bulan yang sama tahun sebelumnya. Jika hari itu tidak ada, bergerak fokus ke hari terakhir bulan itu.
• PGDN : Pindah ke bulan berikutnya.
• Shift+PGDN : Pindah ke hari dan bulan yang sama tahun berikutnya. Jika hari itu tidak ada, bergerak fokus ke hari terakhir bulan itu.
• Beranda : Pindah ke hari pertama (mis. Minggu) dari minggu ini.
• Akhir : Pindah ke hari terakhir (mis. Sabtu) dari minggu ini.
• Enter/ESC/Tab : Tutup kalender. (Enter & ESC Calls PreventDefault)

Untuk pemetik bulan

• Kiri : Pindah ke bulan sebelumnya.
• KANAN : Pindah ke bulan berikutnya.
• Masukkan : Pilih tanggal dan tutup kalender

Lisensi

Hak Cipta (C) 2014-2024 Hackerone Inc. dan kontributor individu. Lisensi di bawah lisensi MIT, lihat lisensi untuk lisensi lengkap.