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

François Beaufort

लंबे समय तक, आपको डेट पिकर दिखाने के लिए, कस्टम विजेट लाइब्रेरी या हैक्स का इस्तेमाल करना पड़ता था. अब वेब प्लैटफ़ॉर्म पर HTMLइनपुट के 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 का धन्यवाद. Calendar की इमेज, Unsplash पर Eric Rothermel की ओर से ली गई है.