datetimepicker - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Mon, 11 May 2015 14:06:55 +0000 th hourly 1 https://wordpress.org/?v=6.8.5 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png datetimepicker - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 Date Time Picker (ปฏิทินวันที่) โดยใช้ jQuery & Plugin https://www.itoffside.com/date-time-picker-jquery-plugin/ https://www.itoffside.com/date-time-picker-jquery-plugin/#comments Mon, 11 May 2015 13:59:16 +0000 https://www.itoffside.com/?p=2476 ในการทำเว็บไซต์มักจะมีวันที่เข้ามาเกี่ยวข้องซึ่งวันนี้ทางผู้เขียนได้แนะนำ jQuery Plugin ที่ใช้งานง่ายๆและผู้อ่านสามารถนำไปประยุกต์ใช้งานเองได้นั้นคือ Date Time Picker – jQuery Plugins by XDSoft ผู้อา่นสามารถดาวน์โหลด คลิกที่นี้เพื่อดาวน์โหลด เหตุผลที่ผู้เขียนเลือกใช้งาน date time picker นั้นคื...

The post Date Time Picker (ปฏิทินวันที่) โดยใช้ jQuery & Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

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

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

The post Date Time Picker (ปฏิทินวันที่) โดยใช้ jQuery & Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/date-time-picker-jquery-plugin/feed/ 18