ไลบรารี datepicker ที่เหมาะกับอุปกรณ์พกพาสำหรับเว็บ

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

ไลบรารี datepicker ที่เหมาะกับอุปกรณ์พกพาสำหรับเว็บ

วันที่ตอบสนอง ห้องสมุด datepicker ที่เหมาะกับอุปกรณ์พกพาสำหรับเว็บที่เป็นสากล เข้าถึงได้ง่าย
วันที่ตอบสนองในการดำเนินการ

สนามเด็กเล่นสด

ดูตัวอย่างการใช้งาน datepicker ได้ที่ http://airbnb.io/react-dates .

หรือ



อัปโหลดหลายไฟล์เชิงมุม

ในการรันการสาธิตนั้นบนคอมพิวเตอร์ของคุณเอง:

  • โคลนที่เก็บนี้
  • npm install
  • npm run storybook
  • เยี่ยม http://localhost:6006/

เริ่มต้น

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

ตรวจสอบให้แน่ใจว่าแพ็คเกจได้รับการติดตั้งด้วยหมายเลขเวอร์ชันที่ถูกต้องโดยเรียกใช้ (จากบรรทัดคำสั่งของคุณ):

( export PKG=react-dates; npm info '$PKG' peerDependencies --json | command sed 's/[{},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save '$PKG' )

ซึ่งสร้างและรันคำสั่งเช่น:

npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##

หากคุณกำลังใช้งาน Windows คำสั่งนั้นจะไม่ทำงาน แต่ถ้าคุณใช้ npm 5 หรือสูงกว่า คุณสามารถเรียกใช้ |_+_| บนทุกแพลตฟอร์ม

เริ่มต้น

npx install-peerdeps react-dates

ตั้งแต่ v13.0.0 ของ |_+_| โปรเจ็กต์นี้ใช้ |_+_| หากคุณต้องการใช้ CSS สไตล์ชีตและคลาสต่อไป จำเป็นต้องมีการตั้งค่าเพิ่มเติมเล็กน้อยเพื่อให้สิ่งต่างๆ ดำเนินไป ดังนั้น คุณต้องนำเข้า |_+_| เพื่อตั้งชื่อคลาสบนส่วนประกอบของเรา การนำเข้านี้ควรอยู่ที่ด้านบนสุดของแอปพลิเคชันของคุณ เนื่องจากคุณจะไม่สามารถนำเข้า |_+_| . ใดๆ ได้ ส่วนประกอบที่ไม่มีมัน

หมายเหตุ: องค์ประกอบนี้ถือว่า |_+_| ถูกกำหนดไว้ทั่วโลกใน CSS ของเพจของคุณ

รวมส่วนประกอบ

import 'react-dates/initialize';
เว็บแพ็ค

ใช้ Webpack กับตัวโหลด CSS เพิ่มการนำเข้าต่อไปนี้ไปยังแอปของคุณ:

react-dates
ไม่มี Webpack:

สร้างไฟล์ CSS ที่มีเนื้อหาของ |_+_| และรวมไว้ใน html |_+_| . ของคุณ ส่วน.

หากต้องการดูการดำเนินการนี้คุณสามารถตรวจสอบ https://github.com/majapw/react-dates-demo ซึ่งเพิ่ม |_+_| บนความเรียบง่าย |_+_| ติดตั้ง.

เอาชนะชั้นฐาน

โดยค่าเริ่มต้น |_+_| จะใช้ |_+_| ตามเงื่อนไขหากมี อย่างไรก็ตาม เป็นไปได้ที่จะแทนที่การตั้งค่านี้และใช้ |_+_| และ |_+_| แทนที่. นอกจากนี้ยังสามารถแทนที่ตรรกะใน |_+_| ถ้าคุณรู้ว่าคุณกำลังใช้เวอร์ชัน React กับ |_+_|

react-with-styles
สไตล์การเอาชนะ

วิธีที่ง่ายที่สุดในการปรับแต่ง |_+_| เนื้อหาในใจของคุณคือการสร้างสไตล์ชีตอื่นเพื่อแทนที่รูปแบบวันที่ตอบสนองเริ่มต้น ตัวอย่างเช่น คุณสามารถสร้างไฟล์ชื่อ |_+_| ด้วยเนื้อหาต่อไปนี้ (ตรวจสอบให้แน่ใจว่าเมื่อคุณนำเข้าไฟล์ดังกล่าวไปยัง |_+_| คุณต้องนำเข้าหลังจากรูปแบบ |_+_|):

ธีมโค้ดสตูดิโอภาพ
react-dates/initialize

ซึ่งจะแทนที่สีพื้นหลังและข้อความที่ใช้กับวันในปฏิทินที่เน้นสี คุณสามารถใช้วิธีนี้กับการตั้งค่าเริ่มต้นเพื่อแทนที่แง่มุมใดๆ ของปฏิทินเพื่อให้เหมาะกับความต้องการเฉพาะของคุณมากขึ้น หากมีสไตล์ที่คุณต้องการที่ไม่ได้ระบุไว้ที่นี่ คุณสามารถตรวจสอบซอร์ส css ของแต่ละองค์ประกอบได้เสมอ

สร้าง datepickers ที่ยอดเยี่ยม

เรามีส่วนประกอบจำนวนหนึ่งให้คุณใช้งาน หากคุณจัดหาอุปกรณ์ประกอบฉากที่จำเป็นให้กับแต่ละองค์ประกอบ คุณจะได้รับเครื่องมือเลือกวันที่แบบอินเทอร์แอกทีฟเต็มรูปแบบ ด้วยอุปกรณ์ประกอบฉากที่เป็นตัวเลือกเพิ่มเติม คุณสามารถปรับแต่งรูปลักษณ์ของอินพุต ปฏิทิน และอื่นๆ ได้ คุณสามารถดูได้ว่าอุปกรณ์ประกอบฉากแต่ละชิ้นทำอะไรใน สาธิตสด หรือสำรวจวิธีการห่อตัวหยิบใน .อย่างเหมาะสม โฟลเดอร์ตัวอย่าง .

DateRangePicker

|_+_| เป็นองค์ประกอบที่มีการควบคุมอย่างสมบูรณ์ซึ่งให้ผู้ใช้เลือกช่วงวันที่ได้ คุณสามารถควบคุมวันที่ที่เลือกได้โดยใช้ |_+_|, |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง |_+_| ยังจัดการสถานะภายในสำหรับวันที่บางส่วนที่ป้อนโดยการพิมพ์ (แม้ว่า |_+_| จะไม่ทริกเกอร์จนกว่าจะป้อนวันที่อย่างสมบูรณ์ในกรณีนั้น) ในทำนองเดียวกัน คุณสามารถควบคุมได้ว่าอินพุตใดที่เน้นและการมองเห็นปฏิทิน (ปฏิทินจะมองเห็นได้ก็ต่อเมื่อ |_+_| ถูกกำหนดไว้) ด้วย |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง

นี่คือขั้นต่ำ ที่จำเป็น การตั้งค่าคุณต้องได้รับ |_+_| ทำงาน:

react-dates

ต่อไปนี้เป็นรายการอื่นๆ ไม่จำเป็น อุปกรณ์ประกอบฉากที่คุณอาจมอบให้กับ |_+_| เพื่อปรับแต่งรูปลักษณ์และพฤติกรรมตามความต้องการของหัวใจ ค่าคงที่ทั้งหมด (ระบุโดย |_+_|) ถูกระบุเป็นการส่งออกที่มีชื่อใน |_+_| กรุณาสำรวจ หนังสือนิทาน สำหรับข้อมูลเพิ่มเติมว่าอุปกรณ์ประกอบฉากแต่ละชิ้นทำอะไรได้บ้าง

box-sizing: border-box
SingleDatePicker

|_+_| เป็นองค์ประกอบที่มีการควบคุมอย่างสมบูรณ์ซึ่งอนุญาตให้ผู้ใช้เลือกวันที่เดียว คุณสามารถควบคุมวันที่ที่เลือกได้โดยใช้ |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง |_+_| ยังจัดการสถานะภายในสำหรับวันที่บางส่วนที่ป้อนโดยการพิมพ์ (แม้ว่า |_+_| จะไม่ทริกเกอร์จนกว่าจะป้อนวันที่อย่างสมบูรณ์ในกรณีนั้น) ในทำนองเดียวกัน คุณสามารถควบคุมได้ว่าจะให้อินพุตถูกโฟกัสหรือไม่ (การมองเห็นปฏิทินยังควบคุมด้วยอุปกรณ์ประกอบฉากเดียวกัน) ด้วย |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง

การสแกนเวลาบูตคืออะไร

นี่คือขั้นต่ำ ที่จำเป็น การตั้งค่าคุณต้องได้รับ |_+_| ทำงาน:

import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';

ต่อไปนี้เป็นรายการอื่นๆ ไม่จำเป็น อุปกรณ์ประกอบฉากที่คุณอาจมอบให้กับ |_+_| เพื่อปรับแต่งรูปลักษณ์และพฤติกรรมตามความต้องการของหัวใจ ค่าคงที่ทั้งหมด (ระบุโดย |_+_|) ถูกระบุเป็นการส่งออกที่มีชื่อใน |_+_| กรุณาสำรวจ หนังสือนิทาน สำหรับข้อมูลเพิ่มเติมว่าอุปกรณ์ประกอบฉากแต่ละชิ้นทำอะไรได้บ้าง

import 'react-dates/lib/css/_datepicker.css';
DayPickerRangeController

|_+_| เป็นเวอร์ชันสำหรับปฏิทินเท่านั้นของ |_+_| ไม่มีอินพุต (ซึ่งหมายความว่าขณะนี้ไม่สามารถเข้าถึงแป้นพิมพ์ได้) และปฏิทินจะมองเห็นได้เสมอ แต่คุณสามารถเลือกช่วงวันที่ได้มากในลักษณะเดียวกับที่ทำกับ |_+_| คุณสามารถควบคุมวันที่ที่เลือกได้โดยใช้ |_+_|, |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง ในทำนองเดียวกัน คุณสามารถควบคุมได้ว่าอินพุตใดที่โฟกัสด้วย |_+_| และ |_+_| อุปกรณ์ประกอบฉากที่แสดงด้านล่าง ผู้ใช้จะสามารถเลือกวันที่ได้ก็ต่อเมื่อ |_+_| มีให้

คำถามสัมภาษณ์ saber ฝึกงาน

นี่คือขั้นต่ำ ที่จำเป็น การตั้งค่าคุณต้องได้รับ |_+_| ทำงาน:

require.resolve('react-dates/lib/css/_datepicker.css')

ต่อไปนี้เป็นรายการอื่นๆ ไม่จำเป็น อุปกรณ์ประกอบฉากที่คุณอาจมอบให้กับ |_+_| เพื่อปรับแต่งรูปลักษณ์และพฤติกรรมตามความต้องการของหัวใจ โปรดสำรวจ .อีกครั้ง หนังสือนิทาน สำหรับข้อมูลเพิ่มเติมว่าอุปกรณ์ประกอบฉากแต่ละชิ้นทำอะไรได้บ้าง

รองรับหลายภาษา

Moment.js เป็นการพึ่งพาเพียร์ของ |_+_| อันหลังใช้อินสแตนซ์เดียวของ |_+_| ซึ่งนำเข้ามาในโครงการของตัวเอง การโหลดสถานที่ทำได้โดยการโทร |_+_| ในองค์ประกอบที่ |_+_| นำเข้าด้วย คีย์สถานที่ ทางเลือก ตัวอย่างเช่น:

react-dates

อย่างไรก็ตาม วิธีนี้จะแก้ปัญหาการแปลวันที่เท่านั้น เพื่อความเป็นสากลของส่วนประกอบ |_+_| กำหนดจำนวนเงินที่แน่นอนของ สตริงอินเทอร์เฟซผู้ใช้ เป็นภาษาอังกฤษซึ่งสามารถเปลี่ยนแปลงได้โดยใช้เครื่องหมาย |_+_| เสา (สำรวจ หนังสือนิทาน ตัวอย่าง). สำหรับข้อกังวลด้านการเข้าถึงและการใช้งาน ควรแปลองค์ประกอบ UI ทั้งหมดเหล่านี้ .

ขั้นสูง

|_+_| ไม่ได้อาศัย CSS อย่างเคร่งครัดอีกต่อไป แต่อาศัย |_+_| เป็นชั้นนามธรรมระหว่างวิธีการใช้สไตล์และวิธีการเขียน คำแนะนำข้างต้นจะทำให้โปรเจ็กต์ทำงานได้ทันที แต่มีการปรับแต่งเพิ่มเติมอีกมากที่สามารถทำได้

อินเทอร์เฟซ

|_+_| สคริปต์ขึ้นอยู่กับ react-with-styles-interface-css ภายใต้ประทุน หากคุณสนใจโซลูชันอื่นสำหรับการจัดสไตล์ในโครงการของคุณ คุณสามารถกำหนดค่าเริ่มต้นของ another . ได้เอง อินเตอร์เฟซ . ที่ Airbnb เราพึ่งพา อะโฟรไดท์ ภายใต้ประทุนและใช้อินเทอร์เฟซ Aphrodite สำหรับ |_+_| หากคุณต้องการทำเช่นเดียวกัน คุณจะใช้รูปแบบต่อไปนี้:

create-react-app

ต้องรันโค้ดด้านบนก่อน |_+_| . ใดๆ ส่วนประกอบถูกนำเข้า มิฉะนั้น คุณจะได้รับข้อผิดพลาด นอกจากนี้ โปรดทราบว่าหากคุณลงทะเบียนอินเทอร์เฟซแบบกำหนดเองใดๆ ด้วยตนเอง คุณ ต้อง ยังลงทะเบียนธีมด้วยตนเอง

ธีม

|_+_| ตอนนี้ยังรองรับรูปแบบที่แตกต่างออกไป คุณสามารถดูค่าชุดรูปแบบเริ่มต้นใน ไฟล์นี้ และคุณจะแทนที่พวกเขาในลักษณะต่อไปนี้:

react-dates

รหัสด้านบนจะใช้เฉดสีเขียวแทนเฉดสีเหลืองสำหรับสีไฮไลท์บน |_+_| ส่วนประกอบ โปรดทราบว่าคุณ ต้อง ลงทะเบียนอินเทอร์เฟซหากคุณลงทะเบียนธีมด้วยตนเอง หนึ่งจะไม่ทำงานหากไม่มีอื่น

วิธีอัพโหลดไฟล์บน github
หมายเหตุเกี่ยวกับการใช้ |_+_|

อินเทอร์เฟซเริ่มต้นที่ |_+_| เรือที่มีคือ อินเตอร์เฟส CSS . หากคุณต้องการใช้อินเทอร์เฟซนี้ร่วมกับวิธีการลงทะเบียนธีม คุณจะต้องสร้างคอร์ใหม่ |_+_| ไฟล์. ขณะนี้เราไม่เปิดเผยวิธียูทิลิตี้ในการสร้างไฟล์นี้ แต่คุณสามารถทำตามพร้อมกับรหัสใน https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js เพื่อสร้างไฟล์ CSS ที่มีธีมของคุณเอง

ดาวน์โหลดรายละเอียด:

ผู้เขียน: แอร์บีเอ็นบี

การสาธิต: http://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default

รหัสแหล่งที่มา: https://github.com/airbnb/react-dates

#react #reactjs #javascript

ดูสิ่งนี้ด้วย:

ของใหม่

อ่านได้มากที่สุด

ตัวเลือกของบรรณาธิการ