โฮมเพจ » ออกแบบเว็บไซต์ » สร้างการป้อนข้อมูลเวลาที่น้อยที่สุดเลือกด้วย Flatpickr

    สร้างการป้อนข้อมูลเวลาที่น้อยที่สุดเลือกด้วย Flatpickr

    หนึ่งในฟิลด์ที่ยากที่สุดในการสร้างคือ เลือกวันที่ / เวลา. นักพัฒนามักหันมาเลือกเมนูแบบง่าย ๆ สำหรับเดือน / วัน / ปีหรือใช้ปลั๊กอินต่าง ๆ ในการทำงาน.

    เลือกเขตข้อมูลทำงานได้ดี แต่พวกเขาจะ clunky เล็กน้อย คุณสามารถแจ๊สแบบฟอร์มของคุณด้วย ปลั๊กอิน Flatpickr. มันคือ ฟรีตัวเลือกปฏิทิน JavaScript แบบโอเพ่นซอร์สที่ไม่มีการพึ่งพาศูนย์.

    มันเป็น ออกแบบด้วยความเรียบง่ายในใจ, เพื่อให้สามารถพอดีกับเลย์เอาต์ของเว็บไซต์รูปแบบเว็บใด ๆ และควรใช้งานได้จากอุปกรณ์ที่ทันสมัย.

    สิ่งหนึ่งที่ดีเกี่ยวกับปลั๊กอินนี้คือ ตัวเลือกที่กำหนดเองที่หลากหลาย. คุณสามารถ restyle วิธีวันที่ปรากฏในฟิลด์ข้อความและที่ปฏิทินเริ่มต้น (ค่าเริ่มต้นใน “ในวันนี้”).

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

    ลองดูที่ หน้าตัวอย่าง เพื่อดูการทำงานของ Flatpickr.

    นอกจากนี้คุณยังสามารถ กำหนดตัวเลือกเป้าหมาย เพื่อ จำกัด พฤติกรรมของเครื่องมือเลือกวันที่เช่น:

    • ไม่อนุญาตวันที่ / ช่วงที่แน่นอน
    • อนุญาตเฉพาะวันที่ / ช่วงที่กำหนด
    • อนุญาตให้เลือกหลายวัน
    • “โหมดช่วง” เพื่อเลือกวันที่เริ่มต้นและสิ้นสุด
    • เพียงแค่เลือกวันที่หรือเพียงแค่เวลาหรือทั้งสองวันที่และเวลาด้วยกัน

    ตัวเลือกต่าง ๆ ไม่มีที่สิ้นสุดจริง ๆ และพวกเขาทำงานผ่านปลั๊กอิน JavaScript วานิลลานี้.

    ผู้ใช้มือถือมักชอบตัวเลือกวันที่แบบดั้งเดิม แต่คุณสามารถทำได้ แทนที่สิ่งนี้ด้วยการตั้งค่ามือถือใน JavaScript. วิธีนี้คุณจะมีอินเทอร์เฟซแบบเดียวกันกับอุปกรณ์ทั้งหมด.

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

    ติดตั้งง่ายด้วย คำสั่งสำหรับ npm, Bower และ Yarn. หรือคุณสามารถดาวน์โหลดไฟล์ต้นฉบับ โดยตรงจาก GitHub ถ้าคุณชอบเส้นทางนั้น.

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