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

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

หากเคยลองใช้ jQuery Datepicker ใน input[type=date] ใน Google Chrome คุณอาจสังเกตเห็นปฏิทินของทั้ง jQuery UI และป๊อปอัปปฏิทินในตัวซ้อนทับกัน หากต้องการใช้ 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();