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

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 وإعلامنا بالمكان الذي تستخدم فيه هذه الميزة وطريقة استخدامها.

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

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