- यह लेख Chrome के सॉफ़्टवेयर इंजीनियर केंट टमुरा ने लिखा है.
जैसा कि आपने पहले से देखा होगा, Google Chrome में Chrome 20 से डेट पिकर काम करता है. input एलिमेंट के type एट्रिब्यूट को date पर सेट करके, उपयोगकर्ता ऐरो बटन पर क्लिक कर सकता है. ऐसा करने पर, Chrome एक अच्छा कैलेंडर विजेट दिखाएगा.
हमें डेवलपर से इस बारे में काफ़ी सुझाव मिले हैं. इसलिए, हम इस लेख में तारीख चुनने वाले टूल की सुविधा का ज़्यादा से ज़्यादा फ़ायदा पाने के बारे में कुछ बातें साफ़ करना चाहते हैं.
स्थान-भाषा, इनपुट वैल्यू के तारीख फ़ॉर्मैट पर कैसे असर डालती है?
उपयोगकर्ता, input[type=date] के टेक्स्ट फ़ील्ड में तारीख की वैल्यू टाइप कर सकते हैं. ऐसा करने के लिए, उन्हें बॉक्स में स्लेटी रंग के टेक्स्ट के तौर पर तारीख का फ़ॉर्मैट दिखेगा. यह फ़ॉर्मैट ऑपरेटिंग सिस्टम की सेटिंग से लिया जाता है.
वेब लेखकों के पास तारीख का फ़ॉर्मैट बदलने का कोई तरीका नहीं है, क्योंकि फ़िलहाल फ़ॉर्मैट को बताने के लिए कोई स्टैंडर्ड मौजूद नहीं है.
किसी सर्वर पर ईमेल भेजते समय इनपुट वैल्यू कैसे दिखाई जाती है?
एचटीटीपी अनुरोध में, input[type=date] से मिली तारीख की वैल्यू, जैसे कि GET / POST को yyyy-mm-dd के तौर पर फ़ॉर्मैट किया जाएगा.
इनपुट वैल्यू किस तरह का फ़ॉर्मैट दिखाता है?
प्रज़ेंटेशन का फ़ॉर्मैट कोई भी हो, input.value हमेशा yyyy-mm-dd के तौर पर दिखता है.
इनपुट वैल्यू किस तरह का फ़ॉर्मैट स्वीकार करती है?
input.value को प्रोग्राम के हिसाब से सेट करते समय, वैल्यू सिर्फ़ yyyy-mm-dd स्टाइल स्वीकार करती है. भले ही, शुरुआती वैल्यू और JavaScript इंजेक्ट की गई वैल्यू, दोनों के लिए प्रज़ेंटेशन का फ़ॉर्मैट कुछ भी हो.
मैं तारीख चुनने वाले टूल की थीम कैसे बदलूं?
फ़िलहाल, तारीख चुनने वाले टूल के लुक को स्टाइल नहीं किया जा सकता. WebKit में, हमने पहले -webkit-appearance सीएसएस प्रॉपर्टी या ::-webkit-foo सूडो क्लास सिलेक्टर की मदद से फ़ॉर्म कंट्रोल को स्टाइल करने के तरीके दिए हैं. हालांकि, कैलेंडर पॉप-अप, WebKit में ऐसे तरीके उपलब्ध नहीं कराता है, क्योंकि यह दस्तावेज़ से अलग है, जैसे कि <select> के लिए पॉप-अप मेन्यू. साथ ही, इसके सब-एलिमेंट की स्टाइल को कंट्रोल करने के लिए, फ़िलहाल कोई स्टैंडर्ड नहीं है.
मैं jQuery डेट पिकर और नेटिव डेट पिकर के बीच टकरावों से कैसे बचूं?
अगर आपने Google Chrome में, input[type=date] पर jQuery तारीख पिकर को आज़माया है, तो आपने jQuery यूज़र इंटरफ़ेस (यूआई) और स्थानीय कैलेंडर पॉप-अप, दोनों के ओवरलैप होने वाले कैलेंडर देखे होंगे.
अगर आपको सभी प्लैटफ़ॉर्म पर jQuery तारीख पिकर लागू करना है, तो input[type=date] के बजाय input[type=text] का इस्तेमाल करें. सिर्फ़ Google Chrome ही नहीं, बल्कि iOS Safari, BlackBerry ब्राउज़र, और Opera में भी input[type=date] के लिए अपना यूज़र इंटरफ़ेस (यूआई) है. फ़िलहाल, input[type=date] का इस्तेमाल करके सभी प्लैटफ़ॉर्म पर एक यूनिफ़ाइड यूज़र इंटरफ़ेस (यूआई) हासिल करने का कोई तरीका मौजूद नहीं है.
अगर आप सिर्फ़ उन प्लैटफ़ॉर्म पर jQuery तारीख पिकर लागू करना चाहते हैं, जिनमें 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();