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

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

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


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

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

<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”

<form name="itoffside" method="POST">
<input type="text" name="startdate" value="" id="startdate" />
</form>

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

 <script type="text/javascript">
 jQuery('#startdate').datetimepicker();
 </script>

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

DateTimePicker jQuery plugin select date and time

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

 <script type="text/javascript">
 jQuery('#startdate').datetimepicker({
 lang:'th'
 });
 </script>

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

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

 <script type="text/javascript">
 jQuery('#startdate').datetimepicker({
 timepicker:false,
 format:'d/m/Y'
 });
 </script>

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

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

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

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

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

15 Comments

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

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

    1. ตรงนี้สร้าง datetimepicker 2 ช่อง แล้วส่วนวิธีหาช่วงเวลาให้ใช้ SQL ในการค้นหา เช่น “select * from table where startdate>= วันที่เริ่ม and enddate <= วันที่สิ้นสุด"

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

      1. 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
        });

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

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