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

Share Button

ในการทำเว็บไซต์มักจะมีวันที่เข้ามาเกี่ยวข้องซึ่งวันนี้ทางผู้เขียนได้แนะนำ 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/

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

benext About benext

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

Share Button

Published by

benext

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

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

  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. บอกได้คำเดียวว่าสุดยอดมากครับ ผมหาวิธีหลายเว็บแล้ว ทำไม่ได้สักที มาที่นี้แปปเดียวได้เลย ขอขอบคุณมากๆครับ

Leave a Reply

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