फ्रंटएंड date picker के लिए एक सहज गाइड

• जटिल JavaScript date picker की जगह सरल और अधिक सुलभ input तरीकों का सुझाव देने वाली गाइड
• ब्राउज़र के built-in input elements (date, time, datetime-local) का उपयोग करने पर accessibility, performance और internationalization support अपने-आप मिल सकता है
• अलग-अलग input fields, masked input, radio button groups आदि से जटिल UI को सरल बनाया जा सकता है
• React जैसे frameworks में भी built-in HTML input elements को वैसे ही इस्तेमाल किया जा सकता है, और styling सीमित होने के बावजूद users को परिचित system UI मिलता है
• हर date picker में accessibility समस्याएँ होती हैं, इसलिए सरल input structure और वास्तविक user testing सफल form design की कुंजी हैं

---

क्या JavaScript date picker सच में ज़रूरी है

• ज़्यादातर मामलों में अलग से JavaScript date picker की आवश्यकता नहीं होती
  • जटिल UI errors और form abandonment बढ़ा सकता है
  • calendar widget से आसान date input के और भी तरीके मौजूद हैं
• इस गाइड का उद्देश्य user-friendly interface के लिए विकल्प प्रस्तुत करना है

ब्राउज़र के built-in date और time input

• सभी आधुनिक ब्राउज़र built-in date, time, datetime-local input types को support करते हैं
  • date तारीख चुनने के लिए, time घंटे और मिनट दर्ज करने के लिए, और datetime-local दोनों को मिलाता है
• built-in input को एक लाइन के code से लागू किया जा सकता है, और ब्राउज़र accessibility, performance, internationalization को संभाल लेता है
  • keyboard input support, built-in calendar UI उपलब्ध
  • यह पूरी तरह परफ़ेक्ट नहीं है, लेकिन ज़्यादातर JavaScript libraries से अधिक स्थिर है
• फिर भी कुछ accessibility issues बने रहते हैं

अलग input और select elements

• एक date picker की तुलना में साल, महीना और दिन को अलग inputs में बाँटना usability बेहतर कर सकता है
  • GOV.UK के date input component का उदाहरण दिया गया है
• जब valid data सीमित हो, तब select element का उपयोग उपयुक्त है
  • input errors कम होते हैं, interaction घटता है
  • महीनों को संख्याओं में दिखाने पर screen reader द्वारा गलत पढ़े जाने से सावधान रहें
• travel booking जैसे fixed time intervals (जैसे हर 15 मिनट) में relative dates (आज, कल) उपयोगी हो सकती हैं

masked input और validation

• masked input field calendar के बिना date format को guide करने का एक विकल्प है
  • JavaScript से client-side validation और formatting की जा सकती है
  • उदाहरण: “फ़रवरी के लिए मान्य दिन दर्ज करें (1~28)” जैसा error message
  • Intl API से date format को अपने-आप format किया जा सकता है
• लेकिन JavaScript से input value update करने पर undo/redo functionality टूट सकती है
• CSS से कई inputs को दृश्य रूप से एक जैसा जोड़कर दिखाया जा सकता है

range selection और सीमित विकल्प

• दो calendars वाले range-select date picker को चलाना मुश्किल होता है और pointer के बिना इस्तेमाल करना असुविधाजनक है
  • इसके बजाय दो input fields से इसे सरल बनाया जा सकता है
• जब सिर्फ चुनी जा सकने वाली तारीखें ही चाहिए हों, तब radio input group से इसे बदला जा सकता है
  • जटिल UI के बजाय इसे सरल step-by-step task बनाया जा सकता है
  • multi-step form को JavaScript से single-page interaction में बदला जा सकता है

free-form input और suggestion feature

• जब सटीक date या time की ज़रूरत न हो, तब सामान्य text input उपयोगी हो सकता है
• datalist element का उपयोग कर input suggestions दी जा सकती हैं
  • यह date, time input types के साथ भी काम करता है

अक्सर पूछे जाने वाले सवाल

JavaScript framework इस्तेमाल करने पर

• सभी प्रमुख frameworks में built-in HTML elements का उपयोग किया जा सकता है
  • custom component बनाने की ज़रूरत नहीं
  • value attribute से two-way state binding संभव है

built-in date picker की styling

• input element के केवल कुछ हिस्सों की styling की जा सकती है, बाकी की नहीं
  • यह users के लिए परिचित system UI बनाए रखने का एक फ़ायदा है
  • operating system, input method और browser के अनुसार design अलग होता है
  • अतिरिक्त design uniformity ज़रूरी नहीं

JavaScript date picker की माँग करने वाले stakeholders को कैसे जवाब दें

• लक्ष्य सफल form submission है, और जटिल UI errors बढ़ाता है
  • हर date picker में accessibility issues होते हैं
  • built-in inputs का संयोजन अधिक user-friendly है
  • बिना verify किए गए JavaScript UI पर European Accessibility Act (EAA) जैसे नियमों का जोखिम हो सकता है
  • सादगी ही सफलता की कुंजी है

accessibility testing और assurance

• WCAG जैसी accessibility guidelines की समझ अनिवार्य है
  • web standards का उपयोग कर custom UI errors से बचा जा सकता है
• browser developer tools की accessibility features से errors पहचाने जा सकते हैं
  • कोई tool परफ़ेक्ट नहीं है, और वास्तविक user testing ही एकमात्र भरोसेमंद सत्यापन तरीका है
• accessibility overlay का उपयोग सख़्ती से हतोत्साहित किया जाता है, क्योंकि यह उलटे समस्याएँ बढ़ा सकता है

accessibility से जुड़ी संदर्भ सामग्री

• Collecting dates in an accessible way — Graham Armfield
• What makes an accessible date picker? — Russ Weakley
• Maybe You Don’t Need a Date Picker — Adrian Roselli
• Date Picker Dialog Example — ARIA Authoring Practices Guide
• Designing The Perfect Date And Time Picker — Vitaly Friedman

JavaScript date picker recommendation के सवाल का जवाब

• कोई सार्वभौमिक समाधान नहीं है, हर date picker की अपनी सीमाएँ हैं
• इस गाइड का उद्देश्य आपको अपनी requirements का स्वयं मूल्यांकन करने में मदद करना है
• जहाँ तक संभव हो, सबसे सरल तरीके से लक्ष्य हासिल करने की सलाह दी जाती है
• date picker हमेशा अनिवार्य नहीं होता

निष्कर्ष

• वास्तविक user testing और feedback इकट्ठा करना अनिवार्य है
• यह गाइड अभी प्रगति में है, और feedback का स्वागत है

[GN⁺]

Hacker News राय

• कुछ साल पहले एक स्थानीय अस्पताल के मरीजों के लिए मोबाइल ऐप बनाया था। उपयोगकर्ताओं में बुजुर्गों की संख्या बहुत थी, और OS का डिफ़ॉल्ट date picker इतना असुविधाजनक था कि शिकायतों की बाढ़ आ गई थी
  “जन्म वर्ष सेट ही नहीं कर सकता”, “अपनी जन्मतिथि तक पहुँचने के लिए पिछले महीने वाले तीर को 720 बार दबाना पड़ा” जैसी बातें सचमुच सुनने को मिली थीं
  उस समय iOS और Android दोनों में year बस एक साधारण title जैसा दिखता था, इसलिए उसे clickable element के रूप में पहचाना नहीं जाता था
  लगा कि सौंदर्य-केंद्रित Flat Design UX को खराब कर रहा है। Don Norman जैसे UX विशेषज्ञों की बजाय designers के हाथ में OS UI तय होने की हकीकत ही समस्या है
  आखिरकार जब इसे textbox-dropdown-textbox (दिन-महीना-वर्ष) रूप में बदला, तो शिकायतें गायब हो गईं
  • UK सरकार की Gov.uk design team research ने भी यही निष्कर्ष निकाला था।
    तीन textboxes (दिन, महीना, वर्ष) सबसे अच्छा अनुभव देते हैं।
    implementation के लिए pattern guide भी है
  • मुझे भी याद है कि पहली बार उस input field का इस्तेमाल करते हुए 100 से ज़्यादा बार tap करने के बाद लगा था, “ये कुछ गड़बड़ है”, फिर खोजा था। सच में यह UX nightmare था
  • “क्या, year पर click किया जा सकता है??” जैसी प्रतिक्रिया अपने-आप निकलती थी, इतनी कम intuitive थी
  • मैं भी कभी उस calendar में year बदलने का तरीका न समझ पाने की वजह से काफ़ी देर तक भटकता रहा था
  • लेकिन जन्मतिथि भरने के लिए भला calendar picker का इस्तेमाल ही क्यों किया गया, यह जानने की जिज्ञासा है
• यात्रा बुकिंग जैसी स्थिति में, जहाँ schedule तय होता है, “आज”, “कल” जैसे relative date expressions सुविधाजनक हो सकते हैं
  लेकिन आधी रात के आसपास flight book करते समय यह भ्रम होता है कि “आज” मेरे timezone के हिसाब से है, server के हिसाब से, या GMT के हिसाब से
  • “आज”, “कल” जैसे relative dates विचार के रूप में अच्छे लगते हैं, लेकिन implementation नरक है।
    timezone, daylight saving time, महीने का अंत (31 जनवरी → अगला महीना?), आधी रात के तुरंत बाद जैसी exceptions बहुत ज़्यादा हैं।
    ऐसी सुविधा जोड़ने से पहले सचमुच बहुत सावधान रहना चाहिए
  • मॉन्ट्रियल की public transport पहले 28-hour clock इस्तेमाल करती थी। आधी रात के बाद bus का समय 27:30 की तरह दिखता था, जो बेहद भ्रमित करने वाला था
  • मुझे यह पसंद नहीं कि computer ‘आज’ को आधी रात के आधार पर define करता है।
    रात 12 बजे के बाद काम करते समय “कल” जैसा expression वास्तविक अनुभव से मेल नहीं खाता।
    असल में उसका मतलब “आज सुबह के बाद” होता है, लेकिन system उसे अगले दिन के रूप में पहचानता है
  • लेकिन “आज” हो या “12 नवंबर”, timezone अलग हो तो वही समस्या पैदा होती है
• 20 साल से ज़्यादा समय तक datepicker से निपटने के अनुभव के आधार पर, सबसे अच्छा तरीका बस input type="text" के साथ format hint देना है
  इससे browser, accessibility, locale जैसी समस्याओं में नहीं उलझना पड़ता
  custom component सच में नरक का दरवाज़ा है। थोड़ा स्टाइल मारने के चक्कर में 10 rabbit holes में गिर जाते हैं
  • जन्मदिन जैसी, पहले से ज्ञात तारीख़ के लिए यह ठीक है, लेकिन flight search में “अप्रैल की शुरुआत के आसपास किसी शुक्रवार” जैसी चीज़ ढूँढनी हो तो calendar चाहिए।
    क्योंकि तारीख़ को visual रूप से explore करना पड़ता है
  • चाहे कोई भी format hint दे दें, “3-9-1980” उपयोगकर्ता के लिए 9 मार्च है या 3 सितंबर, इस पर भरोसा नहीं किया जा सकता
  • यह खराब सलाह है। ISO 8601 पिछली तारीख़ों के लिए ठीक हो सकता है, लेकिन future booking या cross-border schedules के लिए उपयुक्त नहीं है।
    तारीख़ से जुड़ी समस्याएँ सच में जटिल हैं, इसलिए use case के हिसाब से approach चाहिए
  • फिर भी मोबाइल पर year चुन ही न पाने वाले calendar से तो यह कहीं बेहतर है
• internationalization की बात करते हुए सिर्फ़ पश्चिमी date formats का समर्थन करना हास्यास्पद है
  अगर नेपाल के अस्पताल का system बनाया जाए, तो Nepali calendar और Gregorian calendar दोनों का समर्थन होना चाहिए। Nepali calendar बहुत जटिल है
  इथियोपिया 13 महीनों वाला calendar इस्तेमाल करता है, जिसमें आख़िरी महीना 5~6 दिनों का होता है
  अगर किसी के पास सही internationalized date picker का कोई अच्छा reference हो, तो जानना चाहूँगा
• date input का context ही तय करना चाहिए कि कौन-सा picker इस्तेमाल होगा
  उदाहरण के लिए dinner reservation में weekend availability देखने के लिए calendar उपयोगी है, लेकिन जन्मतिथि input के लिए संख्यात्मक रूप से जल्दी भरना ज़्यादा कुशल है
• जैसे credit card जानकारी भरते समय numeric input flow महत्वपूर्ण होता है,
  “महीने का नाम चुनो → dropdown → year चुनो” जैसी प्रक्रिया rhythm तोड़ देती है
  सिर्फ़ numbers भरने का तरीका कहीं ज़्यादा स्वाभाविक है। मोबाइल पर keyboard का बार-बार खुलना-बंद होना इसे और असुविधाजनक बना देता है
• keyboard से सीधे input किया जा सकने वाला date picker देखकर ताज़गी महसूस हुई
  डिफ़ॉल्ट UI की जगह custom picker को मजबूर करना अजीब है।
  खासकर Android पर iOS-स्टाइल wheel-style time picker को web पर नकल करना सबसे बुरा है
• एक डेनिश व्यक्ति होने के नाते “Pikaday” नाम मज़ेदार लगता है। “pik” डेनिश में पुरुष जननांग के लिए slang है
  • “तो क्या Pokémon डेनमार्क में भी लोकप्रिय है?” जैसा मज़ाक तक निकलता था
• सिर्फ़ Date, Time, DateTime picker काफ़ी नहीं हैं
  महीना-आधारित, सप्ताह-आधारित, custom range picker भी चाहिए। native form elements बहुत सीमित हैं
  • सोच रहा हूँ कि <input type="week"> या <input type="month"> में Firefox support के अलावा और क्या कमी है
  • काश ग्रीक देवता Cronus की शक्ति उधार लेने वाला AI time picker होता
• संदर्भ के लिए, इस चर्चा का context Pikaday पर यह लेख है
  • मुझे भी याद है कि पहले कभी Pikaday नाम की datepicker library इस्तेमाल की थी