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

François Beaufort
François Beaufort
GitHub

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

बैकग्राउंड

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

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

Stack Overflow

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

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

ब्राउज़र पिकर के स्क्रीनशॉट
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://cdpn.io/web-dot-dev/fullpage/LEVKVdr पर डेमो उपलब्ध है.

ब्राउज़र समर्थन

showPicker() Chrome 99 या उसके बाद के वर्शन में उपलब्ध है.

आगे क्या करना है

यह लेख लिखते समय, showPicker() वेब प्लैटफ़ॉर्म के लिए नया है. आने वाले समय में, इस सुविधा पर और काम किया जा सकता है:

  • अगर वेब डेवलपर ऐसा करने के लिए कहते हैं, तो हम आने वाले समय में <select> एलिमेंट में इसी तरह का showPicker() जोड़ सकते हैं.
  • ऐसा हो सकता है कि closePicker() काम का हो. अगर वेब डेवलपर इसकी मांग करते हैं, तो हम इसे जोड़ने पर विचार कर सकते हैं.
  • हम अनुमतियों से जुड़ी नीति जोड़ सकते हैं. इससे अलग-अलग ऑरिजिन वाले iframe को ब्राउज़र पिकर दिखाने की अनुमति मिलती है. हालांकि, ऐसा तब ही किया जा सकता है, जब उनकी पैरंट चेन उन्हें ऐसा करने की अनुमति देती हो.

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

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

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

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

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

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

क्या आपको Chrome के साथ काम करने वाले किसी एक्सटेंशन में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, खास जानकारी से अलग है?

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

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

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

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

Acknowledgements

इस लेख की समीक्षा करने के लिए, जो मेडली का धन्यवाद. कैलेंडर की इमेज वाली यह फ़ोटो, Unsplash पर Eric Rothermel ने क्लिक की है.