หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด
chakra dayzed datepicker

Chakra Datepicker อย่างง่ายซึ่งมีพื้นฐานมาจาก Dayzed

ทุกองค์ประกอบใช้ Chakra UI ดังนั้นจึงควรเคารพการกำหนดค่า Chakra UI ทั้งหมดโดยไม่มีปัญหา

ส่วนประกอบนั้นต้องใช้ไลบรารี date บางส่วน

ขอแนะนำอย่างยิ่งให้คัดลอก/วางซอร์สโค้ดจาก /src เพื่อปรับแต่งตามที่คุณต้องการ

ติดตั้งการพึ่งพา

น 

npm i date-fns dayzed
npm i chakra-dayzed-datepicker

เส้นด้าย: 

yarn add date-fns dayzed
yarn add chakra-dayzed-datepicker

การใช้งานขั้นพื้นฐาน

เดี่ยว

  นำเข้า { SingleDatepicker } จาก "chakra-dayzed-datepicker";

  const [date, setDate] = useState (วันที่ใหม่ ());

    
 พิสัย:
 โปรดทราบว่ารายการนี้จะมีค่าเดียวในระหว่างกระบวนการคัดเลือก ระบบของคุณจะไม่ทำงานหากคุณพยายามควบคุมสิ่งนี้โดยตรงเป็น [startDate, endDate] เนื่องจากเราจะพยายามตั้งค่า selectedDates เป็น [intermediateSelection] และความยาวของ selectedDates ที่เลือกไว้จะมีความหมายต่อ datepicker
  นำเข้า { RangeDatepicker } จาก "จักระ-dayzed-datepicker";

    const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

    
 อุปกรณ์ประกอบฉากการกำหนดค่า:
 dateNavBtnProps ขยายมาจาก ButtonProps ของ Chakra-UI ซึ่งช่วยให้คุณสามารถแทนที่พฤติกรรมเริ่มต้นได้ตามที่คุณต้องการ ตราบใดที่ Chakra-UI รองรับ
 dayOfMonthBtnProps = {
  ค่าเริ่มต้นBtnProps,
  อยู่ในช่วงBtnProp,
  เลือกBtnProps,
  วันนี้BtnProps}
 dayOfMonthBtnProps ช่วยให้คุณสามารถกำหนดรูปแบบ btn วันที่ตามสถานะได้
 ลำดับความสำคัญของสไตล์: default < isInRange < seleted < today
 popoverCompProps อาจมีประโยชน์เมื่อคุณต้องการตั้งค่าสไตล์ง่ายๆ เช่น สีข้อความทั่วโลก
 ป๊อปโอเวอร์คอมพรอปส์ = {
  ป๊อปโอเวอร์เนื้อหาอุปกรณ์ประกอบฉาก,
  ป๊อปโอเวอร์บอดี้พร็อพส์}
 เพื่อสรุป:
  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, SelectedBtnProps: {}, todayBtnProps: {}}, inputProps: {}, popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {}},calendarPanelProps: { wrapperProps: {}, contentProps: {}, headerProps: {},dividerProps: {},},weekdayLabelProps: {},dateHeadingProps: {}
  -

 ตัวอย่าง:
  propsConfigs={{dateNavBtnProps: { colorScheme: "blue", variety: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { พื้นหลัง: 'blue.400',} }, isInRangeBtnProps: {สี: "สีเหลือง", }, เลือกBtnProps: {พื้นหลัง: "blue.200",สี: "สีเขียว", }, todayBtnProps: {พื้นหลัง: "teal.400", }},inputProps: { ขนาด: "sm"},popoverCompProps: { popoverContentProps: {พื้นหลัง: "gray.700 ",สี: "สีขาว", },},calendarPanelProps: { wrapperProps: {borderColor: 'สีเขียว', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', },dividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'},dateHeadingProps: { fontWeight: 'semibold '}
  -
 กำหนดค่า:
 การกำหนดค่าที่ไม่เกี่ยวข้องกับจักระ: 
  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,
  }}
 อุปกรณ์ประกอบฉากอื่นๆ:
 ชื่อ เดี่ยว/ช่วง พิมพ์ ค่าเริ่มต้น คำอธิบาย
 ชื่อ ทั้งคู่ เชือก ไม่ได้กำหนด แอตทริบิวต์ชื่อสำหรับองค์ประกอบ 
 ใช้พอร์ทัล ทั้งคู่ บูลีน ไม่ได้กำหนด เพื่อป้องกันไม่ให้สไตล์หลักตัดหรือซ่อนเนื้อหา
 ค่าเริ่มต้นคือเปิด ทั้งคู่ บูลีน เท็จ เปิดแผงวันที่ที่จุดเริ่มต้น
 ปิดOnSelect ทั้งคู่ บูลีน จริง ปิดแผงวันที่เมื่อเลือกเสร็จแล้ว
 นาทีวันที่ ทั้งคู่ วันที่ ไม่ได้กำหนด วันที่ขั้นต่ำ
 maxDate ทั้งคู่ วันที่ ไม่ได้กำหนด วันที่สูงสุด
 ปิดการใช้งานวันที่ เดี่ยว ชุด ไม่ได้กำหนด สำหรับ datepicker เดียวเท่านั้น ใช้ startOfDay เป็นการเปรียบเทียบ เช่น disabledDates={new Set([startOfDay(new Date()).getTime()}
 สำหรับเวอร์ชัน < [email protected] :
 dayOfMonthBtnProps ขยายจาก ButtonProps และได้ selectedBg เฉพาะการสนับสนุน Bg
  dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
  -
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด