إظهار منتقي المتصفح للتاريخ والوقت واللون والملفات

François Beaufort
François Beaufort
GitHub

لفترة طويلة، كان عليك اللجوء إلى مكتبات التطبيقات المصغّرة المخصّصة أو إلى عمليات التلاعب لعرض أدوات اختيار التاريخ. تتضمّن منصة الويب الآن طريقة HTMLInputElement showPicker()، وهي طريقة أساسية لعرض أداة اختيار في المتصفّح لا تتيح اختيار التواريخ فحسب، بل تتيح أيضًا اختيار الوقت واللون والملفات.

الخلفية

من بين الطلبات المتكرّرة التي نتلقّاها من مطوّري الويب:

كيف يمكنني آليًا
عرض أداة اختيار عناصر التحكّم، مثل التاريخ؟

Stack Overflow

الإجابات الحالية ليست رائعة، فهي تعتمد على مكتبات خارجية أو عمليات اختراق CSS أو سلوكيات متصفّح معيّنة، مثل محاكاة تفاعل المستخدِم مع click().

يسرّني إعلامك بأنّ هذه الأيام ستنتهي قريبًا لأنّ منصة الويب ستبدأ في استخدام طريقة أساسية لعرض أداة اختيار متصفّح لعناصر <input> التي تندرج ضمن الأنواع التالية: "date" و"month" و"week" و"time" و"datetime-local" و"color" و"file". وسيعمل أيضًا مع عناصر <input> التي تتضمّن اقتراحات مستندة إلى <datalist> أو "autocomplete"، وسنتناول ذلك أيضًا في هذه المقالة.

لقطات شاشة لأدوات اختيار المتصفّحات
أداة اختيار التاريخ في المتصفّح على أجهزة الكمبيوتر المكتبي التي تعمل بنظام التشغيل Chrome وChrome للأجهزة الجوّالة وSafari للأجهزة المكتبية وSafari للأجهزة الجوّالة وFirefox للأجهزة المكتبية (يوليو 2021)

كيفية عرض أداة اختيار

يؤدي استدعاء 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://show-picker.glitch.me/demo.html يمكنك استخدامه للتلاعب بجميع أدوات الاختيار المتوافقة مع المتصفّح.

دعم المتصفح

يتوفّر الرمز showPicker() في الإصدار 99 من Chrome أو الإصدارات الأحدث.

الخطوات التالية

في وقت كتابة هذه المقالة، كان showPicker() جديدًا على منصة الويب. قد تحتاج الميزة إلى إجراء تعديلات إضافية في المستقبل:

  • قد نضيف showPicker() مشابهًا إلى عنصر <select> في المستقبل، إذا طلب مطوّرو الويب ذلك.
  • من المحتمل أن يكون الخيار closePicker() مفيدًا، ويمكننا النظر في إضافة هذا الخيار إذا طلب مطوّرو الويب ذلك.
  • يمكننا إضافة سياسة أذونات تسمح لإطارات iframe من مصادر مختلفة بعرض أداة اختيار المتصفّح عندما تسمح سلسلة العناصر الرئيسية بذلك.

ملاحظات

يريد فريق Chrome ومجتمع معايير الويب معرفة تجربتك مع showPicker().

أخبرنا عن التصميم

هل هناك مشكلة في showPicker() لا تعمل على النحو المتوقّع؟ أم هل هناك طرق أو سمات مفقودة تحتاج إليها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق بشأن نموذج الأمان؟

هل هناك مشكلة في التنفيذ؟

هل رصدت خطأ في عملية تنفيذ Chrome؟ أم هل التنفيذ مختلف عن المواصفات؟

  • يمكنك إرسال بلاغ عن خلل على الرابط https://new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل والتعليمات البسيطة لإعادة إنتاج المشكلة. إنّ Glitch يُعدّ تطبيقًا رائعًا لمشاركة عمليات إعادة الإنتاج السريعة والسهلة.

إظهار الدعم

هل تخطّط لاستخدام showPicker()؟ يساعد دعمك العلني فريق Chrome في منح الأولوية للميزات ويُظهر لموفّري المتصفّحات الآخرين مدى أهمية إتاحة الميزات للجميع.

يمكنك إرسال تغريدة إلى ‎@ChromiumDev وإعلامنا بالمكان الذي تستخدم فيه هذه الميزة وطريقة استخدامها.

الشكر والتقدير

نشكر Joe Medley على مراجعة هذه المقالة. صورة التقويم من تصوير إيريك روثرميل على Unsplash.