วันอาทิตย์ที่ 18 มกราคม พ.ศ. 2558

[เทคนิค]การทำฟอรมวันที่ด้วย HTML5 ให้รองรับทุกบราวเซอร์


สำหรับเทคทิคนี้ก็บังเอิญเกิดความสงสัยขึ้นมา ก็เลยลองค้นหาวิธีใน Google ดูครับและก็ได้ความรู้นี้มา
ทำ Date form โดยใช้แอตทิบิว Date ของ HTML5 แน่นอนครับว่ามันไม่รองรับบราวเซอร์ได้ทุกรุ่นที่เวอร์ชั่นแน่นอน แต่! ถ้าเราอยากทำให้มันรองรับทุกเวอร์ชั่นล่ะ (ความจริงแล้วใช้จาวาสคริปไปทีเดียวเลยก็จบอ่ะนะ) เอาเป็นว่า

ถ้าต้องการใช้ แอตทิบิว Date อยู่ให้มันทำงานเมื่อบราวเซอร์นั้นๆมันอยากให้ทำงาน ก็คงแอตทิบิวเอาไว้


<input type="date" id="test" />

จากนั้นก็เพิ่มสคริปเอาไว้ให้ตรวจสอบหน่อยครับ หลักการคือ เขียนสคริปตรวจสอบว่าอะไรก็ตามที่มี id=test นั้นมีtype=date หรือไม่ หากไม่ก็ให้ใช้ plugin datepicker ของ jquery แทน ดังนี้ครับ

if ( $('#test')[0].type != 'date' ) $('#test').datepicker();

ดูตัวอย่างได้ที่ http://jsfiddle.net/2AaFk/1/

ขอบคุณข้อมูลจากกระทู้
http://stackoverflow.com/questions/18020950/how-to-make-input-type-date-supported-on-all-browsers-any-alternatives

ไม่มีความคิดเห็น:

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