- यह लेख, Chrome के सॉफ़्टवेयर इंजीनियर केंट तमुरा ने लिखा है.
जैसा कि आपने पहले ही देखा होगा, Google Chrome 20 से ही Google Chrome में, तारीख चुनने की सुविधा काम करती है. input एलिमेंट के type एट्रिब्यूट को date पर सेट करके, उपयोगकर्ता ऐरो बटन पर क्लिक कर सकता है. ऐसा करने पर, Chrome एक अच्छा कैलेंडर विजेट पॉप-अप करेगा.
हमें डेवलपर से बहुत सारे सुझाव और राय मिली हैं. इसलिए, हम इस लेख में तारीख चुनने वाले टूल का ज़्यादा से ज़्यादा फ़ायदा पाने के बारे में कुछ बातें बताना चाहते हैं.
स्थानीय भाषा से, इनपुट वैल्यू की तारीख के फ़ॉर्मैट पर क्या असर पड़ता है?
उपयोगकर्ता, input[type=date] के टेक्स्ट फ़ील्ड में तारीख की कोई वैल्यू टाइप कर सकते हैं. बॉक्स में, तारीख का फ़ॉर्मैट स्लेटी रंग के टेक्स्ट के तौर पर दिखेगा. यह फ़ॉर्मैट, ऑपरेटिंग सिस्टम की सेटिंग से मिलता है.
वेब लेखकों के पास तारीख के फ़ॉर्मैट को बदलने का कोई तरीका नहीं है, क्योंकि फ़िलहाल फ़ॉर्मैट तय करने के लिए कोई स्टैंडर्ड नहीं है.
सर्वर पर भेजते समय, इनपुट वैल्यू को कैसे दिखाया जाता है?
एचटीटीपी अनुरोध, जैसे कि GET / POST में input[type=date] से मिली तारीख की वैल्यू को yyyy-mm-dd के तौर पर फ़ॉर्मैट किया जाएगा.
इनपुट वैल्यू किस तरह का फ़ॉर्मैट दिखाती है?
प्रज़ेंटेशन के फ़ॉर्मैट के बावजूद, input.value हमेशा yyyy-mm-dd के तौर पर दिखता है.
इनपुट वैल्यू किस तरह के फ़ॉर्मैट में स्वीकार की जाती है?
प्रोग्राम के हिसाब से input.value सेट करते समय, वैल्यू सिर्फ़ yyyy-mm-dd स्टाइल स्वीकार करती है. भले ही, शुरुआती वैल्यू और JavaScript इंजेक्ट की गई वैल्यू, दोनों के लिए प्रज़ेंटेशन फ़ॉर्मैट कुछ भी हो.
मैं तारीख चुनने वाले टूल का लुक कैसे बदलूं?
फ़िलहाल, तारीख चुनने वाले टूल के स्टाइल में बदलाव नहीं किया जा सकता. WebKit में, हमने पहले ही -webkit-appearance सीएसएस प्रॉपर्टी या ::-webkit-foo सूडो क्लास सिलेक्टर की मदद से, फ़ॉर्म कंट्रोल को स्टाइल करने के तरीके उपलब्ध कराए हैं. हालांकि, कैलेंडर पॉप-अप, WebKit में ऐसे तरीके उपलब्ध नहीं कराता, क्योंकि यह दस्तावेज़ से अलग होता है. जैसे, <select> के लिए पॉप-अप मेन्यू. फ़िलहाल, इसके सब-एलिमेंट की स्टाइल को कंट्रोल करने का कोई स्टैंडर्ड तरीका नहीं है.
मैं jQuery Datepicker और नेटिव तारीख चुनने वाले टूल के बीच होने वाले टकराव से कैसे बचूं?
अगर आपने Google Chrome में input[type=date] पर jQuery Datepicker आज़माया है, तो आपको jQuery UI और नेटिव कैलेंडर पॉप-अप, दोनों के कैलेंडर ओवरलैप होते हुए दिख सकते हैं.
अगर आपको सभी प्लैटफ़ॉर्म पर jQuery Datepicker लागू करना है, तो input[type=date] के बजाय input[type=text] का इस्तेमाल करें. सिर्फ़ Google Chrome ही नहीं, बल्कि iOS Safari, BlackBerry ब्राउज़र, और Opera के पास भी input[type=date] के लिए अपना खुद का यूज़र इंटरफ़ेस (यूआई) है. साथ ही, input[type=date] का इस्तेमाल करने वाले सभी प्लैटफ़ॉर्म पर यूनिफ़ाइड यूज़र इंटरफ़ेस (यूआई) हासिल करने का कोई तरीका नहीं है.
अगर आपको jQuery Datepicker सिर्फ़ उन प्लैटफ़ॉर्म पर लागू करना है जिन पर input[type=date] काम नहीं करता, तो Modernizr या यहां दिए गए कोड का इस्तेमाल करें:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();