
ในการทำเว็บไซต์มักจะมีวันที่เข้ามาเกี่ยวข้องซึ่งวันนี้ทางผู้เขียนได้แนะนำ jQuery Plugin ที่ใช้งานง่ายๆและผู้อ่านสามารถนำไปประยุกต์ใช้งานเองได้นั้นคือ Date Time Picker – jQuery Plugins by XDSoft ผู้อา่นสามารถดาวน์โหลด คลิกที่นี้เพื่อดาวน์โหลด เหตุผลที่ผู้เขียนเลือกใช้งาน date time picker นั้นคือ ความสวยงาม และ หยืดหยุดมากๆในการกำหนดค่าต่างๆในช่อง text box ดังนั้นเมื่อมีอะไรดีๆ ทางผู้เขียนจึงได้นำมาแนะนำให้ผู้ใช้/โปรแกรมเมอร์ ได้ทำความรู้จักและนำไปใช้ให้เกิดประโยชน์นั้นเอง
วิธีการเรียกใช้งาน
อันดับแรกให้ทำการ include ไฟล์ css,js ตามโค๊ดด้านล่าง
1 2 3 |
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.datetimepicker.js"></script> |
สร้าง text box ขึ้นมาโดยกำหนด id ให้เป็น “startdate”
1 2 3 |
<form name="itoffside" method="POST"> <input type="text" name="startdate" value="" id="startdate" /> </form> |
เขียนคำสั่ง jQuery ไว้ที่ด้านล่างของ text box เพื่อแสดงผล Date Time Picker
1 2 3 |
<script type="text/javascript"> jQuery('#startdate').datetimepicker(); </script> |
เสร็จแล้วครับ ได้ Date Time Picker มาแสดงแบบสวยๆ แบบรูปภาพด้านล่าง เห็นไหมละครับง่ายมากสำหรับการเรียกใช้งาน
ยังไม่หมดเพียงเท่านี้ครับ jQuery Plugin สามารถรองรับภาษาไทยได้อีกด้ววยวิธีการนั้น ให้เขียนคำสั่ง jQuery เพิ่มครับตามตัวอย่างโค๊ดด้านล่าง
1 2 3 4 5 |
<script type="text/javascript"> jQuery('#startdate').datetimepicker({ lang:'th' }); </script> |
แสดงผลออกมาได้เป็นแบบภาพด้านล่างครับ
ต้องการแสดงวันที่อย่างเดียวพร้อมกำหนด format วันที่สามารเขียนคำสั่ง jQuery ดังนี้
1 2 3 4 5 6 |
<script type="text/javascript"> jQuery('#startdate').datetimepicker({ timepicker:false, format:'d/m/Y' }); </script> |
*ถ้าต้องการให้แสดง เวลาอย่างเดียวกำหนด datepicker:false,format:’H:i’
ได้ผลลัพธ์ตามรูปภาพด้านล่างครับ
เพียงเท่านี้ก็เพียงพอสำหรับการใช้งานเบื้องต้นแล้วครับ หากผู้อ่านต้องการศึกษาวิธีการใช้งานนอกเหนือจากนี้สามารถอ่านได้ที่ http://xdsoft.net/jqplugins/datetimepicker/
หากผู้อ่านมีคำถามเพิ่มเติมหรือสงสัยสามารถเขียนคอมเม้นไว้ด้านล่างครับ
ขอบคุณสำหรับการติดตามอ่านบทความเว็บนี้ครับ ทางผู้เขียนพยายามอัพเดทเนื้อหาตลอดๆ ขอบคุณครับ.
ขอบคุณอาจารย์มากครับที่ให้ความรู้ครับ
อาจารย์คับอยากทราบวิธีค้นหา ข้อมูลตามช่วงเวลา คือ startdate &enddate ของdatetimepicker ค้นหาข้อมูล mysql คับ ขอบคุณครับ
ตรงนี้สร้าง datetimepicker 2 ช่อง แล้วส่วนวิธีหาช่วงเวลาให้ใช้ SQL ในการค้นหา เช่น “select * from table where startdate>= วันที่เริ่ม and enddate <= วันที่สิ้นสุด"
ขอบคุณครับ .. ใช้ between startdate and enddate ได้มั้ยคับ
ได้เหมือนกันครับ
ทำอย่างไงอะคับ ไม่ให้เลือกวันที่ผ่านไปแล้วคับ
jQuery(‘#datetimepicker7′).datetimepicker({
timepicker:false,
formatDate:’Y/m/d’,
minDate:’-1970/01/01′,//yesterday is minimum date(for today use 0 or -1970/01/01)
maxDate:’+1970/01/01’//tomorrow is maximum date calendar
});
พอดีลองทำแล้วคะแต่มันไม่เก็บในฐานข้อมูลทำไงดีคะ
อยากจะสอบถามครับ ว่า อยากได้ format เป็น 1 มกราคม 2559 ทำยังไงครับ รบกวนด้วยนะครับ
เขียน script เพิ่มเติมที่ไฟล์ js ครับ
ยังไงครับ ผมเพิ่งหัด มือใหม่เลยครับ เพิ่งลองวันนี้ ในตัว jquery.js เหรอครับ
วันที่ มันไม่ลง sql อะครับ ทำไง
มันเป็น 0000-00-0
jQuery(‘#startdate’).datetimepicker({
timepicker:false,
format:’d/m/Y’ <<<แก้ตรงนี้ครับเปลี่ยน / เป็น –
});
บอกได้คำเดียวว่าสุดยอดมากครับ ผมหาวิธีหลายเว็บแล้ว ทำไม่ได้สักที มาที่นี้แปปเดียวได้เลย ขอขอบคุณมากๆครับ
ต้องการ show ใน textbox เป็น dd mm yyyy แต่จะบันทึกลง db ให้เป็น format mm dd yyyy ทำไงครับ
มีแบบให้เลือกวันเวลาปี 1 ครั้ง แต่ ตอนแสดงให้แสดงใน Textbox แยกกัน Text = วัน – เดือน -ปี
แบบนี้มั้ยครับ ขอบคุณครับ
ลองนำไปทดลองแล้วหน้าปฎิทินขี้นหน้าขาวไม่เห็นวันที่ครับ
ลองเปิด console.log ดูว่า มีเออเร่ออะไรไหม ครับ