- كتب هذه المقالة مهندس برامج 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]. لا يتوفّر واجهة مستخدم input[type=date] في Google Chrome فقط، بل تتوفّر أيضًا في متصفّح iOS Safari ومتصفّح BlackBerry وOpera، ولا تتوفّر حاليًا طريقة للحصول على واجهة مستخدم موحّدة على جميع الأنظمة الأساسية التي تستخدم 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();