Bootstrap Datepicker Plugin
Bootstrap datepicker เป็น plugin ที่ใช้สำหรับการเลือกวันที่ในแบบฟอร์มของเว็บไซต์ ซึ่งใช้งานได้ง่าย และสามารถปรับแต่งตามความต้องการได้หลากหลาย
ในการเรียกใช้งาน Bootstrap datepicker คุณจะต้องมีการติดตั้ง Bootstrap และ datepicker ก่อน ซึ่งคุณสามารถดาวน์โหลดไฟล์ตัวอย่างของ Bootstrap จากเว็บไซต์ของ Bootstrap หรือเรียกใช้งานโดยใช้ CDN ส่วน datepicker สามารถดาวน์โหลดจากเว็บไซต์ของ Bootstrap Datepicker แล้วเพิ่มไฟล์ที่ต้องการเข้าสู่โปรเจคของคุณ เช่น ไฟล์ CSS สำหรับรูปแบบ และไฟล์ JavaScript สำหรับการทำงานของ datepicker
หลังจากนั้น คุณสามารถเริ่มการเขียนโค้ดเพื่อเรียกใช้งาน datepicker โดยการเพิ่มปุ่มหรือฟิลด์ข้อมูลวันที่ลงในแบบฟอร์ม และกำหนดค่าต่างๆ
หลังจากนั้นคุณสามารถเขียน JavaScript เพื่อเรียกใช้ datepicker โดยใช้คำสั่ง .datepicker() ซึ่งจะถูกเรียกใช้กับอิลิเมนต์ที่กำหนดไว้ เช่น ปุ่มหรือฟิลด์ข้อมูลวันที่ ตัวอย่างการเขียน JavaScript ดังนี้:
|
1 2 3 |
$(document).ready(function() { $('#date').datepicker(); }); |
ในตัวอย่างนี้ คำสั่ง .datepicker() จะถูกเรียกใช้กับอิลิเมนต์ที่มี ID ชื่อ “date” คำสั่ง .ready จะทำหน้าที่เรียกใช้งาน datepicker เมื่อหน้าเว็บโหลดเสร็จสมบูรณ์
นอกจากนี้คุณยังสามารถกำหนดค่าต่างๆ เพื่อปรับแต่ง datepicker ได้ เช่น รูปแบบของวันที่ที่จะแสดง ช่วงของวันที ที่สามารถเลือกได้ และฟังก์ชันการเลือกวันที่ เช่น การเลือกวันที่เมื่อคลิกปุ่ม หรือการแสดงข้อความแจ้งเตือนเมื่อวันที่ถูกเลือก ซึ่งคุณสามารถกำหนดค่านี้โดยการใช้คำสั่ง .datepicker() พร้อมกับอาร์กิวเมนต์ของค่าที่ต้องการกำหนด ตัวอย่างการกำหนดค่าต่างๆ ดังนี้
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('#date').datepicker({ format: 'dd/mm/yyyy', startDate: '01/01/2010', endDate: '31/12/2022', todayBtn: 'linked', todayHighlight: true, autoclose: true }); }); |
คำอธิบายในตัวอย่างนี้
format: ‘dd/mm/yyyy’ คือ กำหนดรูปแบบของวันที่เป็น ‘dd/mm/yyyy’
startDate: ’01/01/2010′, endDate: ’31/12/2022′ คือ กำหนดช่วงของวันที่ที่สามารถเลือกได้ จากวันที่ 1 มกราคม 2010 ถึง 31 ธันวาคม 2022
todayBtn: ‘linked’ คือ กำหนดปุ่ม “Today” เมื่อคลิกแล้วให้กรอกวันที่ปัจจุบันให้ในช่อง input
todayHighlight: true คือ กำหนดสีไฮไลท์วันที่ปัจจุบัน
autoclose: true คือ กำหนดให้ datepicker ปิดอัตโนมัติเมื่อเลือกวันที่แล้ว
ลองมาดูตัวอย่าง code Bootstrap Datepicker แบบเต็มๆกันครับ
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script> </head> <body> <form> <div class="form-group"> <label for="datepicker">เลือกวันที่:</label> <input type="text" class="form-control" id="date"> </div> </form> </body> </html> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('#date').datepicker({ format: 'mm/dd/yyyy', startDate: '01/01/2010', endDate: '12/31/2020', todayBtn: 'linked', todayHighlight: true, autoclose: true }); }); |
ผลลัพท์ของ bootstrap datepicker
หากคุณมีข้อสงสัยหรือคำถามสามารถถามได้ในคอมเม้นนี้
ขอบคุณครับ
