top of page
การสร้างฟิลด์ข้อมูลเเบบวัน-เวลา
HTML5 ได้เพิ่มชนิดของ type6 เเบบเพื่อใช้ในการเก็บข้อมูลเเบบวัน-เวลา โดยเเสดงเป็นกรอบปฎิทินให้ผู้ใช้เลือกได้โดยสะดวก เเต่ยังคงใช้ได้กับเบราว์เซอร์บางตัวเท่านั้น เช่น Chrome เเละ opera เป็นต้น
รูปเเบบ <input type = "รูปเเบบวัน-เวลา">
โดยที่
รูปเเบบวัน-เวลา กำหนดได้ 6 เเบบคือ
data ป้อนข้อมูลวันที่
time ป้อนข้อมูลเวลา
datetime ป้อนข้้อมูลวันที่เเละเวลา (รวม time zone)
datetime-local ป้อนข้อมูลเเละวันที่-เวลาตามรูปเเบบที่เครื่องผู้ใช้ใช้
(ไม่รวม time zone)
month ป้อนข้อมูลเดือน
week ป้อนข้อมูลสัปดาห์
1.ตัวอย่างการสร้างฟิลด์ข้อมูลวันที่เเบบง่ายๆ
<input type="data">
รูปเเบบที่ได้จะขึ้นอยู่กับเเต่ละเบราว์เซอร์เราอาจคลิกที่เเต่ละส่วนของรูปเเบบวันที่ปรากฏิทิน เเล้วพิมพ์ข้อมูลลงไปได้เลยซึ่งปรับค่าได้ด้วยปุ่ม หรือ คลิกที่ปุ่ม เพื่อเลือกจากปฏิทิน
2.การสร้างฟิลด์เวลา
<input type="time" value"10:30">
รูปเเบบที่ได้จะขึ้นอยู่กับเเต่ละเบราว์เซอร์
3.หากต้องการใช้เวลาท้องถิ่นของผู้ใช้
<input type="datetime-local" value"2016-05-31T21:00">
จะเห็นว่า เเม่เรากำหนดค่าวัน-เวลาในรูปเเบบ yyyy-mm-ddThh:mm เเต่ละเบราว์เซอร์เเสดงตาใรูปเเบบของเคครื่องผู้ใช้ที่ถูกกำหนดไว้
4. การป้อนข้อมูลเฉพาะเดือน
<input type="month "
value"2016-05">
5.การป้อนข้อมูลสัปดาห์
<input type="week ">
ตัวอย่างการกำหนดข้อมูลเเบบวัน-เวลา
<body>
<form>
วันเกิด(ดด-วว-ปป): <input type="data" name="birthday" value="2000-01-01">
ผลที่ได้บนเบราว์เซอร์
bottom of page