ข้ามไปยังเนื้อหาหลัก
itOffside
Onmobile อ่าน 3 นาที 18 ความเห็น

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

jquery
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/

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

#datetimepicker #datepicker #timepicker #jquery

แชร์บทความนี้

แชร์ไปยัง Facebook แชร์ไปยัง X แชร์ไปยัง LINE
Onmobile

โปรแกรมเมอร์

ความเห็น (18)

  • สันต์
    ขอบคุณอาจารย์มากครับที่ให้ความรู้ครับ
  • nutty
    อาจารย์คับอยากทราบวิธีค้นหา ข้อมูลตามช่วงเวลา คือ startdate &amp;enddate ของdatetimepicker ค้นหาข้อมูล mysql คับ ขอบคุณครับ
    • Onmobile ผู้เขียน
      ตรงนี้สร้าง datetimepicker 2 ช่อง แล้วส่วนวิธีหาช่วงเวลาให้ใช้ SQL ในการค้นหา เช่น "select * from table where startdate>= วันที่เริ่ม and enddate <= วันที่สิ้นสุด"
      • nutty
        ขอบคุณครับ .. ใช้ between startdate and enddate ได้มั้ยคับ
        • Onmobile ผู้เขียน
          ได้เหมือนกันครับ
    • Tonsmall
      ทำอย่างไงอะคับ ไม่ให้เลือกวันที่ผ่านไปแล้วคับ
      • Onmobile ผู้เขียน
        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 });
  • Ngam
    พอดีลองทำแล้วคะแต่มันไม่เก็บในฐานข้อมูลทำไงดีคะ
  • Cat a Vat
    อยากจะสอบถามครับ ว่า อยากได้ format เป็น 1 มกราคม 2559 ทำยังไงครับ รบกวนด้วยนะครับ
    • Onmobile ผู้เขียน
      เขียน script เพิ่มเติมที่ไฟล์ js ครับ
      • Cat a Vat
        ยังไงครับ ผมเพิ่งหัด มือใหม่เลยครับ เพิ่งลองวันนี้ ในตัว jquery.js เหรอครับ
  • kong
    วันที่ มันไม่ลง sql อะครับ ทำไง มันเป็น 0000-00-0
    • Shibata
      jQuery('#startdate').datetimepicker({ timepicker:false, format:'d/m/Y' &lt;&lt;&lt;แก้ตรงนี้ครับเปลี่ยน / เป็น - });
  • Shibata
    บอกได้คำเดียวว่าสุดยอดมากครับ ผมหาวิธีหลายเว็บแล้ว ทำไม่ได้สักที มาที่นี้แปปเดียวได้เลย ขอขอบคุณมากๆครับ
  • Ask
    ต้องการ show ใน textbox เป็น dd mm yyyy แต่จะบันทึกลง db ให้เป็น format mm dd yyyy ทำไงครับ
  • buncha
    มีแบบให้เลือกวันเวลาปี 1 ครั้ง แต่ ตอนแสดงให้แสดงใน Textbox แยกกัน Text = วัน - เดือน -ปี แบบนี้มั้ยครับ ขอบคุณครับ
  • falcoa
    ลองนำไปทดลองแล้วหน้าปฎิทินขี้นหน้าขาวไม่เห็นวันที่ครับ
    • Onmobile ผู้เขียน
      ลองเปิด console.log ดูว่า มีเออเร่ออะไรไหม ครับ

แสดงความเห็น

ไม่แสดงบนหน้าเว็บ

บทความที่เกี่ยวข้อง