คำถามที่พบบ่อยเกี่ยวกับอินพุต[type=date] ใน Google Chrome

Eiji Kitamura

  • บทความนี้เขียนโดย Kent Tamura วิศวกรซอฟต์แวร์ของ Chrome

คุณคงสังเกตเห็นแล้วว่า Google Chrome รองรับเครื่องมือเลือกวันที่ตั้งแต่ Chrome 20 เป็นต้นมา เพียงแค่ตั้งค่าแอตทริบิวต์ type ขององค์ประกอบ input เป็น date ผู้ใช้จะคลิกปุ่มลูกศรได้ และ Chrome ก็จะแสดงวิดเจ็ตปฏิทินที่สวยงามขึ้นมา

เนื่องจากเราได้รับความคิดเห็นจำนวนมากจากนักพัฒนาซอฟต์แวร์ เราจึงอยากชี้แจงสักเล็กน้อยเกี่ยวกับวิธีใช้งานเครื่องมือเลือกวันที่ให้คุ้มค่าที่สุดในบทความนี้

ภาษาส่งผลต่อรูปแบบวันที่ของค่าอินพุตอย่างไร

ผู้ใช้จะพิมพ์ค่าวันที่ในช่องข้อความของ input[type=date] โดยใช้รูปแบบวันที่แสดงในช่องเป็นข้อความสีเทาได้ รูปแบบนี้ได้มาจากการตั้งค่าของระบบปฏิบัติการ

หน้าจอรูปแบบวันที่

ผู้เขียนเว็บไม่มีวิธีเปลี่ยนรูปแบบวันที่เนื่องจากขณะนี้ยังไม่มีมาตรฐานที่ระบุรูปแบบ

ค่าอินพุตแสดงอย่างไรเมื่อส่งไปยังเซิร์ฟเวอร์

ค่าวันที่ที่ตีความจาก input[type=date] ในคำขอ HTTP เช่น GET / POST จะได้รับการจัดรูปแบบเป็น yyyy-mm-dd

ค่าที่ป้อนกลับมาในรูปแบบใด

input.value จะแสดงผลเป็น yyyy-mm-dd เสมอโดยไม่คำนึงถึงรูปแบบงานนำเสนอ

ค่าที่ป้อนยอมรับรูปแบบใด

เมื่อตั้งค่า input.value แบบเป็นโปรแกรม ค่านี้ยอมรับเฉพาะสไตล์ yyyy-mm-dd ไม่ว่ารูปแบบงานนำเสนอจะเป็นรูปแบบใดก็ตาม สำหรับทั้งค่าเริ่มต้นและค่าที่แทรกด้วย JavaScript

ฉันจะเปลี่ยนลักษณะของเครื่องมือเลือกวันที่ได้อย่างไร

ปัจจุบันคุณไม่สามารถจัดรูปแบบลักษณะที่ปรากฏของเครื่องมือเลือกวันที่ ใน WebKit เราได้ระบุวิธีการจัดรูปแบบการควบคุมแบบฟอร์มด้วยคุณสมบัติ CSS -webkit-appearance หรือตัวเลือกคลาสเทียม ::-webkit-foo ไว้แล้วก่อนหน้านี้ อย่างไรก็ตาม ใน WebKit ป๊อปอัปปฏิทินไม่ได้บอกวิธีดังกล่าวไว้ เนื่องจากไม่ใช่เอกสาร เหมือนเป็นเมนูป๊อปอัปสำหรับ <select> และยังไม่มีมาตรฐานสำหรับวิธีควบคุมการจัดรูปแบบองค์ประกอบย่อย

ฉันจะหลีกเลี่ยงความขัดแย้งระหว่าง jQuery Datepicker กับเครื่องมือเลือกวันที่แบบดั้งเดิมได้อย่างไร

หากคุณได้ลองใช้ jQuery Datepicker บน input[type=date] ใน Google Chrome คุณอาจสังเกตเห็นปฏิทินที่ทับซ้อนกันของทั้ง UI ของ jQuery และป๊อปอัปปฏิทินในเครื่อง หากคุณต้องการใช้ jQuery Datepicker ในทุกแพลตฟอร์ม ให้ใช้ input[type=text] แทน input[type=date] ไม่เพียง Google Chrome และ iOS Safari, เบราว์เซอร์ BlackBerry และ Opera จะมี UI เป็นของตัวเองสำหรับ input[type=date] และในขณะนี้ยังไม่มีวิธีการใช้งาน UI รวมในทุกแพลตฟอร์มที่ใช้ input[type=date] หากคุณต้องการใช้ jQuery Datepicker เฉพาะในแพลตฟอร์มที่ไม่รองรับ input[type=date] เท่านั้น คุณอาจใช้ Modernizr หรือโค้ดต่อไปนี้

var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
    $('input[type="date"]').datepicker();