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

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub

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

बैकग्राउंड

वेब डेवलपर इस तरह के बार-बार अनुरोध करते हैं:

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

स्टैक ओवरफ़्लो

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

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

ब्राउज़र पिकर के स्क्रीनशॉट
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 को एक ट्वीट भेजें और हमें बताएं कि आप इसका इस्तेमाल कहां और कैसे कर रहे हैं.

स्वीकार हैं

इस लेख को पढ़ने के लिए, जो मेडली का धन्यवाद. Unsplash पर एरिक रॉथर्मल की कैलेंडर इमेज.