react datepicker

ตัวเลือกวันที่ตอบสนอง

องค์ประกอบวันที่ที่เรียบง่ายและสามารถนำกลับมาใช้ใหม่ได้สำหรับ React (Demo)

การติดตั้ง

สามารถติดตั้งแพ็คเกจผ่าน NPM:

 npm install react-datepicker --save

หรือผ่านเส้นด้าย:

 yarn add react-datepicker

คุณจะต้องติดตั้ง React และ Proptypes แยกต่างหากเนื่องจากการพึ่งพาเหล่านั้นไม่รวมอยู่ในแพ็คเกจ หากคุณต้องการใช้สถานที่อื่นนอกเหนือจาก EN-US เริ่มต้นคุณจะต้องนำเข้าสู่โครงการของคุณจากวันที่ FNs (ดูส่วนการแปลด้านล่าง) ด้านล่างเป็นตัวอย่างง่ายๆของวิธีการใช้ DatePicker ในมุมมองปฏิกิริยา คุณจะต้องต้องการไฟล์ CSS จากแพ็คเกจนี้ (หรือให้ของคุณเอง) ตัวอย่างด้านล่างแสดงวิธีรวม CSS จากแพ็คเกจนี้หากระบบบิลด์ของคุณรองรับไฟล์ CSS (WebPack เป็นไฟล์ที่ทำ)

 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 ) } />
  ) ;
} ; 

การกำหนดค่า

การใช้งานพื้นฐานที่สุดของ DatePicker สามารถอธิบายได้ด้วย:

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

คุณสามารถใช้ตัวจัดการเหตุการณ์ onSelect ซึ่งยิงทุกครั้งที่เลือกวันที่ปฏิทินบางวัน

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

Handler onClickOutside อาจเป็นประโยชน์ในการปิด datepicker ในโหมด inline

ดูที่นี่สำหรับรายการอุปกรณ์ประกอบฉากทั้งหมดที่อาจส่งผ่านไปยังส่วนประกอบ ตัวอย่างมีอยู่ในเว็บไซต์หลัก

ตัวเลือกเวลา

นอกจากนี้คุณยังสามารถรวมตัวเลือกเวลาได้โดยการเพิ่ม prop showtimeselect

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

เวลาจะแสดงเป็นระยะเวลา 30 นาทีโดยค่าเริ่มต้น (ค่าเริ่มต้นที่กำหนดค่าได้ผ่าน TimeLinvals Prop)

ตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการใช้ตัวเลือกเวลาจะได้รับบนเว็บไซต์หลัก

การแปลเป็นภาษาท้องถิ่น

ตัวเลือกวันที่ขึ้นอยู่กับการทำให้เป็นสากล Date-FNS เพื่อ จำกัด องค์ประกอบการแสดงผล โดยค่าเริ่มต้นตัวเลือกวันที่จะใช้สถานที่ตั้งทั่วโลกซึ่งเป็นภาษาอังกฤษ มีวิธีการช่วย 3 วิธีในการตั้งค่าสถานที่:

• registerLocale (สตริงวัตถุ): โหลดวัตถุโลคาลที่นำเข้าจากวันที่-FNS
• setDefaultLocale (สตริง): ตั้งค่าสถานที่ที่ลงทะเบียนเป็นค่าเริ่มต้นสำหรับอินสแตนซ์ datepicker ทั้งหมด
• getDefaultLocale : ส่งคืนสตริงที่แสดงตำแหน่งเริ่มต้นที่ตั้งไว้ในปัจจุบัน

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

< DatePicker
  locale = "es"
/ >

สถานที่สามารถเปลี่ยนแปลงได้ด้วยวิธีต่อไปนี้:

• ทั่วโลก - setDefaultLocale('es');

ความเข้ากันได้

ตอบโต้

เราพยายามที่จะใช้งานร่วมกับ React เวอร์ชันล่าสุดได้เสมอ เราไม่สามารถรองรับ React รุ่นเก่าทั้งหมดได้

รุ่นที่เข้ากันได้ล่าสุด:

• ตอบสนอง 16 หรือใหม่กว่า: React-DatePicker V2.9.4 และใหม่กว่า
• React 15.5: React-DatePicker V2.9.3
• React 15.4.1: ต้องการ React-Datepicker v0.40.0, ใหม่จะไม่ทำงาน (เนื่องจากการพึ่งพา react-onclickoutside)
• ตอบสนอง 0.14 หรือใหม่กว่า: ทั้งหมดข้างต้น React-DatePicker V0.13.0
• React 0.13: React-Datepicker V0.13.0
• Pre React 0.13: React-Datepicker V0.6.2

moment.js

จนถึงเวอร์ชัน 1.8.0 แพ็คเกจนี้ใช้ moment.js เริ่มต้น v2.0.0 เราเปลี่ยนไปใช้ date-fns ซึ่งใช้วัตถุวันที่ดั้งเดิมเพื่อลดขนาดของแพ็คเกจ หากคุณเปลี่ยนจาก 1.8.0 เป็น 2.0.0 หรือสูงกว่าโปรดดูตัวอย่างที่อัปเดตด้านบนของการตรวจสอบไซต์ตัวอย่างสำหรับตัวอย่างล่าสุด

การสนับสนุนเบราว์เซอร์

ตัวเลือกวันที่เข้ากันได้กับ Chrome, Firefox และ IE10+เวอร์ชันล่าสุด

น่าเสียดายที่มันเป็นเรื่องยากที่จะสนับสนุนเบราว์เซอร์มรดกในขณะที่ยังคงรักษาความสามารถของเราในการพัฒนาคุณสมบัติใหม่ในอนาคต สำหรับการสนับสนุน IE9 เป็นที่ทราบกันดีว่าจำเป็นต้องมี polyfill ชั้นเรียน แต่สิ่งนี้อาจเปลี่ยนแปลงหรือหยุดพักได้ทุกจุดในอนาคต

การพัฒนาท้องถิ่น

สาขา main มีส่วนประกอบรุ่นล่าสุดของ DatePicker

เพื่อเริ่มการพัฒนาในท้องถิ่น:

1. เรียกใช้ yarn link จากรูทโครงการ
2. เรียกใช้ cd docs-site && yarn link react-datepicker
3. เรียกใช้ yarn install จากรูทโครงการ
4. เรียกใช้ yarn build จาก Project Root
5. เรียกใช้ yarn start จากรูทโครงการ

ขั้นตอนสุดท้ายเริ่มต้นแอพเอกสารเป็นเว็บเซิร์ฟเวอร์อย่างง่ายบน http: // localhost: 3000

คุณสามารถเรียกใช้ yarn test เพื่อดำเนินการชุดทดสอบและผ้าลินิน เพื่อช่วยให้คุณพัฒนาส่วนประกอบที่เราได้ตั้งค่าการทดสอบบางอย่างที่ครอบคลุมฟังก์ชั่นพื้นฐาน (สามารถพบได้ใน /tests ) แม้ว่าเราจะเป็นแฟนตัวยงของการทดสอบ แต่ก็ครอบคลุมส่วนประกอบชิ้นเล็ก ๆ เท่านั้น เราขอแนะนำให้คุณเพิ่มการทดสอบเมื่อคุณเพิ่มฟังก์ชั่นใหม่

โปรดดูไฟล์ CONTRIBUTING.md สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า

ตัวอย่าง

ตัวอย่างถูกโฮสต์ภายในโฟลเดอร์ DOCS และวิ่งในแอพง่าย ๆ ที่โหลด DatePicker ในการขยายตัวอย่างด้วยตัวอย่างใหม่คุณสามารถทำซ้ำตัวอย่างหนึ่งในตัวอย่างที่มีอยู่และเปลี่ยนคุณสมบัติที่ไม่ซ้ำกันของตัวอย่างของคุณ

การเข้าถึงได้

รองรับคีย์บอร์ด

• ซ้าย : ย้ายไปยังวันก่อนหน้า
• ขวา : ย้ายไปยังวันถัดไป
• ขึ้น : ย้ายไปที่สัปดาห์ก่อนหน้า
• ลง : ย้ายไปที่สัปดาห์หน้า
• PGUP : ย้ายไปยังเดือนก่อนหน้า
• Shift+PGUP : ย้ายไปยังวันเดียวกันและเดือนของปีก่อน หากวันนั้นไม่มีอยู่ให้ย้ายมุ่งเน้นไปที่วันสุดท้ายของเดือน
• PGDN : ย้ายไปยังเดือนถัดไป
• Shift+PGDN : ย้ายไปยังวันเดียวกันและเดือนของปีหน้า หากวันนั้นไม่มีอยู่ให้ย้ายมุ่งเน้นไปที่วันสุดท้ายของเดือน
• หน้าแรก : ย้ายไปยังวันแรก (เช่นวันอาทิตย์) ของสัปดาห์ปัจจุบัน
• สิ้นสุด : ย้ายไปยังวันสุดท้าย (เช่นวันเสาร์) ของสัปดาห์ปัจจุบัน
• Enter/ESC/TAB : ปิดปฏิทิน (Enter & ESC เรียก PreventDefault)

สำหรับตัวเลือกเดือน

• ซ้าย : ย้ายไปที่เดือนก่อนหน้า
• ขวา : ย้ายไปยังเดือนถัดไป
• ป้อน : เลือกวันที่และปิดปฏิทิน

ใบอนุญาต

ลิขสิทธิ์ (c) 2014-2024 Hackerone Inc. และผู้มีส่วนร่วมรายบุคคล ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ดูใบอนุญาตสำหรับใบอนุญาตเต็มรูปแบบ