Date Time Picker (ปฏิทินวันที่) โดยใช้ jQuery & Plugin

ในการทำเว็บไซต์มักจะมีวันที่เข้ามาเกี่ยวข้องซึ่งวันนี้ทางผู้เขียนได้แนะนำ jQuery Plugin ที่ใช้งานง่ายๆและผู้อ่านสามารถนำไปประยุกต์ใช้งานเองได้นั้นคือ Date Time Picker – jQuery Plugins by XDSoft ผู้อา่นสามารถดาวน์โหลด คลิกที่นี้เพื่อดาวน์โหลด เหตุผลที่ผู้เขียนเลือกใช้งาน date time picker นั้นคือ ความสวยงาม และ หยืดหยุดมากๆในการกำหนดค่าต่างๆในช่อง text box ดังนั้นเมื่อมีอะไรดีๆ ทางผู้เขียนจึงได้นำมาแนะนำให้ผู้ใช้/โปรแกรมเมอร์ ได้ทำความรู้จักและนำไปใช้ให้เกิดประโยชน์นั้นเอง

คลิกเพื่อทดลองใช้งาน Demo


วิธีการเรียกใช้งาน

อันดับแรกให้ทำการ include ไฟล์ css,js ตามโค๊ดด้านล่าง

สร้าง text box  ขึ้นมาโดยกำหนด id ให้เป็น “startdate”

เขียนคำสั่ง jQuery  ไว้ที่ด้านล่างของ text box เพื่อแสดงผล Date Time Picker

เสร็จแล้วครับ ได้ Date Time Picker มาแสดงแบบสวยๆ แบบรูปภาพด้านล่าง เห็นไหมละครับง่ายมากสำหรับการเรียกใช้งาน

DateTimePicker jQuery plugin select date and time

ยังไม่หมดเพียงเท่านี้ครับ jQuery Plugin สามารถรองรับภาษาไทยได้อีกด้ววยวิธีการนั้น ให้เขียนคำสั่ง jQuery เพิ่มครับตามตัวอย่างโค๊ดด้านล่าง

แสดงผลออกมาได้เป็นแบบภาพด้านล่างครับ
datetimepicker-02

ต้องการแสดงวันที่อย่างเดียวพร้อมกำหนด format วันที่สามารเขียนคำสั่ง jQuery ดังนี้

*ถ้าต้องการให้แสดง เวลาอย่างเดียวกำหนด datepicker:false,format:’H:i’

ได้ผลลัพธ์ตามรูปภาพด้านล่างครับ
datetimepicker-03

เพียงเท่านี้ก็เพียงพอสำหรับการใช้งานเบื้องต้นแล้วครับ หากผู้อ่านต้องการศึกษาวิธีการใช้งานนอกเหนือจากนี้สามารถอ่านได้ที่ http://xdsoft.net/jqplugins/datetimepicker/

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

You May Also Like

About the Author: Onmobile

โปรแกรมเมอร์
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

18 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
สันต์
สันต์
9 years ago

ขอบคุณอาจารย์มากครับที่ให้ความรู้ครับ

nutty
9 years ago

อาจารย์คับอยากทราบวิธีค้นหา ข้อมูลตามช่วงเวลา คือ startdate &enddate ของdatetimepicker ค้นหาข้อมูล mysql คับ ขอบคุณครับ

nutty
Reply to  Onmobile
9 years ago

ขอบคุณครับ .. ใช้ between startdate and enddate ได้มั้ยคับ

Tonsmall
Reply to  nutty
8 years ago

ทำอย่างไงอะคับ ไม่ให้เลือกวันที่ผ่านไปแล้วคับ

Ngam
8 years ago

พอดีลองทำแล้วคะแต่มันไม่เก็บในฐานข้อมูลทำไงดีคะ

Cat a Vat
Cat a Vat
8 years ago

อยากจะสอบถามครับ ว่า อยากได้ format เป็น 1 มกราคม 2559 ทำยังไงครับ รบกวนด้วยนะครับ

Cat a Vat
Cat a Vat
Reply to  Onmobile
8 years ago

ยังไงครับ ผมเพิ่งหัด มือใหม่เลยครับ เพิ่งลองวันนี้ ในตัว jquery.js เหรอครับ

kong
8 years ago

วันที่ มันไม่ลง sql อะครับ ทำไง
มันเป็น 0000-00-0

Shibata
Shibata
Reply to  kong
7 years ago

jQuery(‘#startdate’).datetimepicker({
timepicker:false,
format:’d/m/Y’ <<<แก้ตรงนี้ครับเปลี่ยน / เป็น –
});

Shibata
Shibata
7 years ago

บอกได้คำเดียวว่าสุดยอดมากครับ ผมหาวิธีหลายเว็บแล้ว ทำไม่ได้สักที มาที่นี้แปปเดียวได้เลย ขอขอบคุณมากๆครับ

Ask
Ask
5 years ago

ต้องการ show ใน textbox เป็น dd mm yyyy แต่จะบันทึกลง db ให้เป็น format mm dd yyyy ทำไงครับ

buncha
4 years ago

มีแบบให้เลือกวันเวลาปี 1 ครั้ง แต่ ตอนแสดงให้แสดงใน Textbox แยกกัน Text = วัน – เดือน -ปี
แบบนี้มั้ยครับ ขอบคุณครับ

falcoa
falcoa
1 year ago

ลองนำไปทดลองแล้วหน้าปฎิทินขี้นหน้าขาวไม่เห็นวันที่ครับ