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

فرانسوا بوفورت
فرانسوا بوفورت
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() لا يعمل كما توقعت؟ أو هل هناك طرق أو خصائص مفقودة تحتاج إلى تنفيذ فكرتك؟ هل لديك سؤال أو تعليق على نموذج الأمان؟

  • يمكنك الإبلاغ عن مشكلة متعلقة بالمواصفات في تقرير whatWG GitHub أو إضافة ملاحظاتك إلى مشكلة قائمة.

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

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

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

إظهار الدعم

هل تخطّط لاستخدام "showPicker()"؟ يساعد الدعم العلني فريق Chrome في تحديد أولويات الميزات ويبيِّن لمورّدي المتصفِّح الآخرين مدى أهمية دعمهم.

يمكنك إرسال تغريدة إلى @ChromiumDev وإخبارنا بمكان استخدامك له وكيفية استخدامك له.

شكر وتقدير

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