তারিখ, সময়, রঙ এবং ফাইলগুলির জন্য একটি ব্রাউজার পিকার দেখান

ফ্রাঁসোয়া বিউফোর্ট
François Beaufort
GitHub

দীর্ঘ সময়ের জন্য, আপনাকে একটি ডেট পিকার দেখানোর জন্য কাস্টম উইজেট লাইব্রেরি বা হ্যাকগুলি অবলম্বন করতে হয়েছিল৷ ওয়েব প্ল্যাটফর্মটি এখন HTMLInputElement showPicker() পদ্ধতির সাথে পাঠানো হয়, এটি শুধুমাত্র তারিখের জন্য নয়, সময়, রঙ এবং ফাইলের জন্য একটি ব্রাউজার পিকার দেখানোর একটি আদর্শ উপায়।

পটভূমি

ওয়েব ডেভেলপারদের কাছ থেকে আমরা যে ঘন ঘন অনুরোধ শুনি তা হল:

আমি কিভাবে প্রোগ্রামেটিক করব
তারিখের মত নিয়ন্ত্রণের জন্য একটি পিকার দেখান?

স্ট্যাক ওভারফ্লো

বর্তমান উত্তর মহান নয়; তারা বাহ্যিক লাইব্রেরি, CSS হ্যাক বা নির্দিষ্ট ব্রাউজার আচরণের উপর নির্ভর করে যেমন click() এর সাথে ব্যবহারকারীর মিথস্ক্রিয়া অনুকরণ করা।

আমি শেয়ার করতে পেরে আনন্দিত যে সেই দিনগুলি শীঘ্রই শেষ হয়ে যাবে কারণ ওয়েব প্ল্যাটফর্ম এই ধরনের <input> উপাদানগুলির জন্য একটি ব্রাউজার পিকার দেখানোর একটি আদর্শ উপায় প্রবর্তন করছে: "date" , "month" , "week" , "time" , "datetime-local" , "color" এবং "file" । এটি <datalist> বা "autocomplete" দ্বারা চালিত পরামর্শ সহ <input> উপাদানগুলির জন্যও কাজ করবে যা আমরা এই নিবন্ধে কভার করব।

ব্রাউজার বাছাইকারীদের স্ক্রিনশট
ক্রোম ডেস্কটপ, ক্রোম মোবাইল, সাফারি ডেস্কটপ, সাফারি মোবাইল এবং ফায়ারফক্স ডেস্কটপে (জুলাই 2021) ব্রাউজার ডেট পিকার।

কিভাবে একটি পিকার দেখান

একটি <input> উপাদানে showPicker() কল করা ব্যবহারকারীকে একটি ব্রাউজার পিকার দেখায়। এটিকে অবশ্যই ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়া হিসাবে ডাকতে হবে যেমন একটি স্পর্শ অঙ্গভঙ্গি বা মাউস ক্লিক; অন্যথায় এটি একটি NotAllowedError ব্যতিক্রম সহ ব্যর্থ হবে। নিরাপত্তার কারণে, যখন এটি একটি ক্রস-অরিজিন আইফ্রেমে কল করা হয় তখন এটি একটি SecurityError ব্যতিক্রম নিক্ষেপ করবে।

একটি ব্রাউজার পিকার দেখানো হয় যখন <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() Chrome 99 বা তার পরে উপলব্ধ।

এরপর কি

লেখার সময়, showPicker() ওয়েব প্ল্যাটফর্মে নতুন। বৈশিষ্ট্যটির ভবিষ্যতে অতিরিক্ত কাজের প্রয়োজন হতে পারে:

  • আমরা ভবিষ্যতে <select> উপাদানটিতে একটি অনুরূপ showPicker() যোগ করতে চাই, যদি ওয়েব ডেভেলপাররা এটির জন্য বলে।
  • এটা সম্ভব closePicker() উপযোগী হতে পারে, এবং ওয়েব ডেভেলপাররা এটির জন্য অনুরোধ করলে আমরা এটি যোগ করার কথা বিবেচনা করতে পারি।
  • আমরা একটি অনুমতি নীতি যোগ করতে পারি যা ক্রস-অরিজিন আইফ্রেমগুলিকে ব্রাউজার বাছাইকারীদের দেখানোর অনুমতি দেয় যখন তাদের প্যারেন্ট চেইন তাদের এটি করার অনুমতি দেয়।

প্রতিক্রিয়া

Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় showPicker() এর সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়।

ডিজাইন সম্পর্কে বলুন

showPicker() সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশা মতো কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে?

  • WHATWG GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন, বা বিদ্যমান সমস্যাটিতে আপনার চিন্তা যোগ করুন।

বাস্তবায়নে সমস্যা?

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা সম্ভব বিস্তারিত এবং পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

সমর্থন দেখান

আপনি showPicker() ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

@ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

স্বীকৃতি

এই নিবন্ধটি পর্যালোচনা করার জন্য জো মেডলিকে ধন্যবাদ। আনস্প্ল্যাশে এরিক রথারমেলের ক্যালেন্ডার ছবির ছবি।