لفترة طويلة، كان عليك اللجوء إلى مكتبات التطبيقات المصغّرة المخصّصة أو الحلول البديلة لعرض أداة اختيار التاريخ. تتضمّن منصة الويب الآن طريقة HTMLInputElement showPicker()، وهي طريقة أساسية لعرض أداة اختيار في المتصفّح ليس فقط للتواريخ، بل أيضًا للوقت والألوان والملفات.
الخلفية
طلب متكرّر نسمعه من مطوّري الويب:
كيف يمكنني عرض أداة اختيار لعناصر التحكّم، مثل التاريخ، بشكل آلي
Stack Overflow
باستخدام الرمز البرمجي؟
الإجابات الحالية ليست رائعة، فهي تعتمد على مكتبات خارجية أو حلول CSS غير تقليدية أو سلوكيات متصفّح معيّنة، مثل محاكاة تفاعل المستخدم مع click().
يسرّني أن أعلن أنّ هذه المشكلة ستنتهي قريبًا، إذ إنّ منصة الويب ستتيح طريقة أساسية لعرض أداة اختيار ملفات في المتصفح لعناصر <input> التي تتضمّن الأنواع التالية: "date" و"month" و"week" و"time" و"datetime-local" و"color" و"file". سيعمل ذلك أيضًا مع عناصر <input> التي تتضمّن اقتراحات من <datalist> أو "autocomplete"، وسنتناولها أيضًا في هذه المقالة.
كيفية عرض أداة اختيار
يؤدي استدعاء showPicker() على عنصر <input> إلى عرض أداة اختيار المتصفّح للمستخدم. يجب استدعاؤها استجابةً لإيماءة من المستخدم، مثل إيماءة لمس أو نقرة بالماوس، وإلا ستتعذّر مع ظهور الاستثناء NotAllowedError.
لأسباب أمنية، سيتم عرض استثناء SecurityError عند طلب البيانات في إطار iframe متعدد المصادر.
يظهر اختيار المتصفح عندما يكون العنصر <input> أحد الأنواع التالية:
"date" أو "month" أو "week" أو "time" أو "datetime-local" أو "color" أو "file".
يوضّح لك المثال أدناه كيفية فتح أداة اختيار التاريخ في المتصفّح.
<input type="date">
<button>Show the date picker</button>
<script>
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
يمكن أيضًا ملء أداة اختيار المتصفّح مسبقًا بعناصر من <datalist> أو "autocomplete".
يوضّح المثال أدناه كيفية فتح أداة اختيار المتصفّح باستخدام <datalist>.
<datalist id="ice-cream-flavors">
<option value="Chocolate"> </option>
<option value="Coconut"> </option>
<option value="Mint"> </option>
<option value="Strawberry"> </option>
<option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>
<script>
const button = document.querySelector("button");
const iceCreamFlavorsInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
iceCreamFlavorsInput.showPicker();
// A picker containing some ice cream flavors is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
رصد الميزات
للتحقّق مما إذا كان الرمز showPicker() متاحًا، استخدِم ما يلي:
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
عرض توضيحي
يتوفّر عرض توضيحي على https://cdpn.io/web-dot-dev/fullpage/LEVKVdr يمكنك من خلاله تجربة جميع أدوات الاختيار التي يتيحها المتصفّح.
دعم المتصفح
يتوفّر showPicker() في الإصدار 99 من Chrome أو الإصدارات الأحدث.
الخطوات التالية
في وقت كتابة هذا المقال، كانت showPicker() ميزة جديدة على منصة الويب. قد تحتاج الميزة إلى تحسينات إضافية في المستقبل:
- قد نريد إضافة
showPicker()مشابه إلى العنصر<select>في المستقبل، إذا طلب مطوّرو الويب ذلك. - من المحتمل أن يكون
closePicker()مفيدًا، ويمكننا التفكير في إضافته إذا طلب مطوّرو الويب ذلك. - يمكننا إضافة سياسة أذونات تسمح لإطارات iframe من مصادر متعددة بعرض أدوات اختيار المتصفّح عندما تسمح لها سلسلة الأصل بذلك.
الملاحظات
يريد فريق Chrome ومنتدى معايير الويب معرفة تجاربك مع showPicker().
أخبِرنا عن التصميم
هل هناك أي شيء في showPicker() لا يعمل كما هو متوقّع؟ أو
هل هناك طرق أو سمات ناقصة تحتاج إلى تنفيذ فكرتك؟
هل لديك سؤال أو تعليق حول نموذج الأمان؟
- يمكنك الإبلاغ عن مشكلة في المواصفات على مستودع WHATWG GitHub، أو إضافة أفكارك إلى مشكلة حالية.
هل تواجه مشكلة في التنفيذ؟
هل عثرت على خطأ في تنفيذ Chrome؟ أو هل يختلف التنفيذ عن المواصفات؟
- يمكنك الإبلاغ عن الخطأ على https://new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل وتعليمات بسيطة لإعادة إنتاج الخطأ.
إظهار الدعم
هل تخطّط لاستخدام showPicker()؟ يساعد دعمك العلني فريق Chrome في تحديد أولويات الميزات، ويوضّح لمورّدي المتصفّحات الآخرين مدى أهمية توفيرها.
يمكنك إرسال تغريدة إلى @ChromiumDev وإخبارنا بمكان استخدامك لها وطريقة استخدامك لها.
روابط مفيدة
- مستندات MDN
- شرح WHATWG
- مواصفات WHATWG
- مراجعة TAG
- العرض التوضيحي | مصدر العرض التوضيحي
- خطأ في Chromium
- إدخال ChromeStatus.com
الإقرارات
نشكر جو ميدلي على مراجعة هذه المقالة. صورة التقويم من تصوير إريك روثرميل على Unsplash