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