तारीख, समय, रंग, और फ़ाइलों के लिए ब्राउज़र पिकर दिखाएं

François Beaufort

लंबे समय तक, तारीख चुनने वाला टूल दिखाने के लिए, आपको कस्टम विजेट लाइब्रेरी या हैक का इस्तेमाल करना पड़ता था. वेब प्लैटफ़ॉर्म अब HTMLInputElement showPicker() तरीके के साथ शिप होता है. यह तरीका, तारीखों के साथ-साथ समय, रंग, और फ़ाइलों के लिए भी ब्राउज़र पिकर दिखाने का कैननिकल तरीका है.

बैकग्राउंड

वेब डेवलपर हमसे अक्सर यह अनुरोध करते हैं:

मैं प्रोग्राम के हिसाब से
तारीख जैसे कंट्रोल के लिए पिकर कैसे दिखाऊं?

Stack Overflow

मौजूदा जवाब बहुत अच्छे नहीं हैं. ये बाहरी लाइब्रेरी, सीएसएस हैक या ब्राउज़र के खास व्यवहार पर निर्भर करते हैं. जैसे, click() के साथ उपयोगकर्ता इंटरैक्शन को सिम्युलेट करना.

हमें यह बताते हुए खुशी हो रही है कि वे दिन जल्द ही खत्म हो जाएंगे, क्योंकि वेब प्लैटफ़ॉर्म पर <input> एलिमेंट के लिए ब्राउज़र पिकर दिखाने का एक कैननिकल तरीका शुरू किया जा रहा है. यह तरीका इन टाइप के साथ काम करेगा: "date", "month", "week", "time", "datetime-local", "color", और "file". यह <input> एलिमेंट के लिए भी काम करेगा. इनमें <datalist> या "autocomplete" की मदद से सुझाव मिलते हैं. इस बारे में हम इस लेख में भी बताएंगे.

Chrome डेस्कटॉप, Chrome मोबाइल, Safari डेस्कटॉप, Safari मोबाइल, और Firefox डेस्कटॉप (जुलाई 2021) में ब्राउज़र के लिए तारीख चुनने वाले टूल.

ध्यान दें: तीसरे पक्ष के पिकर विजेट के मुकाबले, ब्राउज़र पिकर उपयोगकर्ता के लिए जाना-पहचाना होता है. साथ ही, इसमें प्लैटफ़ॉर्म के हिसाब से बेहतर सहायता मिलती है और इसे हमेशा ब्राउज़र के हिस्से के तौर पर मैनेज किया जाता है.

पिकर दिखाने का तरीका

<input> एलिमेंट पर showPicker() को कॉल करने से, उपयोगकर्ता को ब्राउज़र पिकर दिखता है. इसे उपयोगकर्ता के किसी जेस्चर के जवाब में कॉल किया जाना चाहिए, जैसे कि टच जेस्चर या माउस क्लिक. ऐसा न करने पर, यह NotAllowedError अपवाद के साथ काम नहीं करेगा. सुरक्षा के लिहाज़ से, क्रॉस-ओरिजिन iframe में इसे कॉल करने पर, यह 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() काम का हो. अगर वेब डेवलपर इसका अनुरोध करते हैं, तो हम इसे जोड़ने पर विचार कर सकते हैं.
• हम एक अनुमतियों की नीति जोड़ सकते हैं. इससे क्रॉस-ऑरिजिन iframe, ब्राउज़र पिकर दिखा सकते हैं. हालांकि, ऐसा तब ही होगा, जब उनकी पैरंट चेन उन्हें ऐसा करने की अनुमति देगी.

सुझाव/राय दें या शिकायत करें

Chrome की टीम और वेब स्टैंडर्ड कम्यूनिटी को showPicker() के साथ आपके अनुभवों के बारे में जानना है.

हमें डिज़ाइन के बारे में बताएं

क्या showPicker() में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? क्या आपके आइडिया को लागू करने के लिए, कोई ऐसा तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है?

• WHATWG GitHub repo पर, खास जानकारी से जुड़ी समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

क्या लागू करने में समस्या आ रही है?

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

• https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. Glitch, रिप्रोडक्शन को तुरंत और आसानी से शेयर करने के लिए बहुत अच्छा है.

क्रिएटर के लिए अपना सपोर्ट दिखाना

क्या आपको showPicker() का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता पाने से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र के अन्य वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

@ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मदद के लिए लिंक

• MDN दस्तावेज़
• WHATWG के बारे में जानकारी
• WHATWG स्पेसिफ़िकेशन
• टैग की समीक्षा
• डेमो | डेमो सोर्स
• Chromium में गड़बड़ी
• ChromeStatus.com पर मौजूद जानकारी

आभार

इस लेख की समीक्षा करने के लिए, Joe Medley का धन्यवाद. Unsplash पर Eric Rothermel की ओर से दी गई कैलेंडर इमेज.