यदि कोई ब्राउज़र <इनपुट प्रकार = 'दिनांक'> का समर्थन करता है, तो मैं कैसे बता सकता हूं


82

संभव डुप्लिकेट:
एचटीएमएल 5 टाइप डिटेक्शन और प्लगिन इनिशियलाइज़ेशन

<input type=date>

एक वैकल्पिक (वैकल्पिक) उपयोगकर्ता-एजेंट के साथ डेटपिकर प्रदान करने के लिए एक इनपुट बनाना चाहिए, लेकिन इसका व्यापक रूप से अभी तक समर्थन नहीं किया गया है, इसलिए हम jQuery UI डेटपिकर का उपयोग कर रहे हैं। हम ब्राउज़र को अपनी स्वयं की तारीख का उपयोग करने और jQuery UI पर वापस गिरने की अनुमति केवल तभी दे सकते हैं यदि ब्राउज़र में ऐसा कुछ नहीं है?

वर्तमान में, मुझे लगता है कि केवल ओपेरा में एक डेटापिकर में बनाया गया है, लेकिन ओपेरा के लिए एक परीक्षण स्पष्ट रूप से खराब होगा। क्या कोई ऐसा तरीका है जिससे इस सुविधा का पता लगाया जा सकता है (यदि यह पोर्टेबल तरीके से हो सकता है)?


1
डेट सपोर्ट का पता लगाना इस तथ्य से जटिल है कि विभिन्न ब्राउज़र विभिन्न स्तरों पर तारीखों का समर्थन करते हैं। कुछ एक अच्छे कैलेंडर की तारीख लेने वाले प्रदान करते हैं। अन्य लोग इसे केवल एक तारीख की तरह मान्य करते हैं।
rjmunro

2
वास्तव में मैंने सवाल क्यों पूछा। मैं यह जानना चाहता था कि क्या ब्राउज़र में डेटपिकर है, न कि अगर यह डेट इनपुट को समझने का दावा करता है। यह AFAICT एक डुप्लिकेट नहीं है, और नीचे दिए गए जवाब मदद नहीं करते हैं। मुझे सिर्फ अपडेट करने या चुनाव लड़ने का दौर नहीं मिला। मैं बस साथ गया <input class=datepicker>और हमेशा jquery ui डेटपिकर (पुराने तरीके से) का उपयोग करता हूं ।
DaedalusFall

1
यह डेस्कटॉप ब्राउज़रों पर ध्यान दिया जाना चाहिए तारीख इनपुट यूआई अक्सर वांछित होने के लिए कुछ छोड़ देता है। यदि वे इसका समर्थन करते हैं, तो भी आप इसका उपयोग नहीं करना चाहते हैं। यह समस्या मोबाइल ब्राउज़रों को प्रभावित नहीं करती है।
अमीर रेमर

जवाबों:


133

विधि bellow जाँचता है कि कुछ इनपुट प्रकार अधिकांश ब्राउज़रों द्वारा समर्थित है:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

लेकिन, जैसा कि सिमेंटोक्स ने टिप्पणियों में उल्लेख किया है, कुछ ब्राउज़र (एंड्रॉइड स्टॉक ब्राउज़र के रूप में) यह दिखाते हैं कि वे कुछ प्रकार (तारीख के अनुसार) का समर्थन करते हैं, लेकिन वे तारीख इनपुट के लिए यूआई की पेशकश नहीं करते हैं। इसलिए सिमोनॉक्स ने तारीख क्षेत्र में अवैध मूल्य स्थापित करने की चाल का उपयोग करके कार्यान्वयन में सुधार किया। यदि ब्राउज़र इस इनपुट को सैनिटाइज करता है, तो यह एक तारीख की पेशकश भी कर सकता है !!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

8
एंड्रॉइड स्टॉक ब्राउज़र में काम नहीं करता है, यह सच है, लेकिन डेटपिकर के लिए समर्थन नहीं है
Björn Andersson

33
सभी Android स्टॉक ब्राउज़रों में टाइप विशेषता के लिए पूछना काम नहीं करता है। वे htat का दिखावा करते हैं वे इनपुट टाइप = डेट का समर्थन करते हैं, लेकिन वे डेट इनपुट के लिए यूआई नहीं देते हैं। इस सुविधा का पता लगाने ने मेरे लिए काम किया: फ़ंक्शन () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ( 'टाइप', 'तारीख'); el.setAttribute ('मान', नोटडेटव्यू); वापसी (el.value === notADateValue); } ट्रिक एक अवैध मान को डेट फ़ील्ड में सेट करना है। यदि ब्राउज़र इस इनपुट को सैनिटाइज करता है, तो यह एक तारीख की पेशकश भी कर सकता है।
सिमोनॉक्स

3
क्या आपका मतलब '! ===' = '! ==' है? :)
मैट्टी बालाम

1
@MattyBalaam जाहिर है कि एक वाक्यविन्यास त्रुटि थी। मैंने इसे ठीक कर लिया :)
Ionică Bizău

अच्छी तरह से काम। आप अन्य HTML5 प्रकारों का पता लगाने के लिए आसानी से इस विधि का विस्तार कर सकते हैं।
गुस्तावव गिल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.