फ़ायरफ़ॉक्स और / या IE 10 में काम करने वाले HTML 5 इनपुट प्रकार = "तिथि" कैसे प्राप्त करें

Question

मुझे यह अजीब लगता input type="date"है जो इस समय के बाद भी फ़ायरफ़ॉक्स में समर्थित नहीं है। वास्तव में, मुझे नहीं लगता कि वे एक इनपुट तत्व पर HTML 5 नए प्रकारों के बहुत (यदि हो तो) में जोड़े गए हैं। आश्चर्य नहीं कि यह IE10 में समर्थित नहीं है। तो, मेरा सवाल है ...

जोड़ने के बिना काम कर रहे type="date"एक inputतत्व पर प्राप्त करने के लिए कैसे , अभी तक एक और, .js फ़ाइल (अर्थात् jQueryUIDatePicker विजेट) केवल IE और फ़ायरफ़ॉक्स ब्राउज़रों के लिए एक कैलेंडर / तारीख पाने के लिए? वहाँ कुछ है कि कहीं लागू किया जा सकता है (CDN शायद?) कि फ़ायरफ़ॉक्स और / या डिफ़ॉल्ट रूप से डिफ़ॉल्ट रूप से इस कार्यक्षमता का काम करेगा ?? IE 8+ ब्राउज़रों और फ़ायरफ़ॉक्स के लिए लक्षित करने की कोशिश करना, कोई फर्क नहीं पड़ता, नवीनतम संस्करण (28.0) ठीक होगा।

अद्यतन: फ़ायरफ़ॉक्स 57+ इनपुट प्रकार = दिनांक का समर्थन करता है

Comments

मेरे लिए हास्यास्पद लगता है कि फ़ायरफ़ॉक्स अभी भी इसका समर्थन नहीं करता है। मैंने क्रोम से फ़ायरफ़ॉक्स पर आज स्विच किया है, बस एक दिन / सप्ताह के लिए यह देखने के लिए कि इन दिनों क्या है, और यह तुरंत मुझे वापस स्विच करना चाहता है!

— Codemonkey

इसकी मजाक नहीं एफएफ तारीख को

— दबाने

यही कारण है कि जब लोग कहते हैं कि फ़ायरफ़ॉक्स सबसे अच्छा ब्राउज़र है तो मैं परेशान हूं।

— मार्टिन ब्रौन

जबकि पॉलीफ़िल नहीं, मैंने सिर्फ पिकैडे का उपयोग करके समाप्त किया, जो कि बिना या अन्य निर्भरता के बिना एक सादे जेएस

— लिबास है

फ़ायरफ़ॉक्स 57 में डिफ़ॉल्ट रूप से काम करने लगता है। फिर भी!

— एंटोनी पिंसार्ड

Answer 1

आप webshims की कोशिश कर सकते हैं , जो कि cdn पर उपलब्ध है + केवल पॉलीफ़िल को लोड करता है, यदि यह आवश्यक है।

यहाँ CDN के साथ एक डेमो दिया गया है: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

यदि डिफ़ॉल्ट कॉन्फ़िगरेशन संतुष्ट नहीं होता है, तो इसे कॉन्फ़िगर करने के कई तरीके हैं । यहां आपको डेटकॉपर विन्यासक मिलता है ।

नोट: जबकि भविष्य में webshim के लिए नए बगफिक्स रिलीज हो सकते हैं। अब कोई बड़ी रिलीज़ नहीं होगी। इसमें jQuery 3.0 या किसी भी नई सुविधाओं के लिए समर्थन शामिल है।

Comments

यह अच्छा समाधान है, कॉन्फ़िगरेशन समृद्ध है, लेकिन मुझे यह पता नहीं चल पाया है कि "YYYY / MM / DD" जैसे दिनांक प्रारूप को कहां सेट करना है

— Pavel Niedoba

जब मैं IE 11 में इस jsfiddle को चलाने का प्रयास करता हूं, तो मुझे "एक्सेस से वंचित" त्रुटि मिलती है, और दिनांक पिकर काम नहीं करता है।

— शाविस

यह IE10 पर काम नहीं करता है ... मुझे @Shavais द्वारा उल्लिखित एक ही त्रुटि मिलती है ... इसे 1.11 या उससे ऊपर के jquery संस्करण को काम करने के लिए प्राप्त करें। इस लिंक पर जाएं

— नितिन

Unfortunatelly, webshims आगामी Jquery 3 का समर्थन नहीं किया जाएगा, जैसा कि लेखक की साइट पर बताया गया है। ऐसा होने के कारण, मैं अच्छे और पुराने Jquery UI पर निर्भर रहूंगा।

— मारिओमिडेन

यह निश्चित रूप से फ़ायरफ़ॉक्स में काम करता है। लेकिन

— वरुणी एनआर

Answer 2

यह संस्करण 51 (26 जनवरी, 2017) से फ़ायरफ़ॉक्स में है, लेकिन यह डिफ़ॉल्ट रूप से सक्रिय नहीं है (अभी तक)

इसे सक्रिय करने के लिए:

about: config

dom.forms.datetime -> सच पर सेट

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Comments

यह सुनकर खुशी हुई। डिफ़ॉल्ट रूप से imo पर होना चाहिए। लेकिन यह जानना अच्छा है।

— सोलोमन क्लॉसन

मैं एफएफ 64.0.2 पर हूं, लेकिन भले ही यह विकल्प "सच" (चालू) है, यह काम नहीं करता है, डेटाइम बॉक्स अभी भी केवल पाठ है। मैं भी कोई सफलता के साथ "timepicker" को सक्षम करने की कोशिश की है।

— व्यर्थ_ कोडर

Answer 3

JQuery द्वारा प्रदान की गई datePicker घटक का उपयोग करके इस प्रतिबंध से छुटकारा पाने का एक सरल तरीका है ।

1. JQuery और jQuery UI लाइब्रेरी शामिल करें (मैं अभी भी एक पुराने का उपयोग कर रहा हूं)

   • src = "js / jQuery-1.7.2.js"
   • src = "js / jQuery-ui-1.7.2.js"

2. निम्नलिखित स्निप का उपयोग करें

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });

यदि आवश्यक हो तो jQuery UI DatePicker देखें - दिनांक स्वरूप बदलें ।

Comments

ओपी कहते हैं, "जोड़ने के बिना काम करना, अभी तक एक और, .js फ़ाइल (अर्थात् jQueryUI DatePicker विजेट)" ... लेकिन यह सवाल Google के शीर्ष हिट है, इसलिए आपका जवाब अभी भी बहुत मददगार है, हालांकि यह सवाल का जवाब नहीं देता है। काश मुझे अब आपके पोस्ट को अपवित्र करने के लिए बुरा नहीं लगता।

— दर्शन

कैलेंडर को ठीक से दिखाने के लिए आपको jQuery UI CSS शामिल करना होगा। <br> <लिंक rel = "स्टाइलशीट" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

— यूएएन शाओलिन मैकूले लाई

Answer 4

प्रकार = "तिथि" इस बिंदु पर एक वास्तविक विनिर्देश नहीं है। यह एक अवधारणा है जो Google के साथ आया था और उनके व्हाट्सएप विनिर्देशों (आधिकारिक नहीं) में है और केवल क्रोम द्वारा आंशिक रूप से समर्थित है।

http://caniuse.com/#search=date

मैं इस बिंदु पर इस इनपुट प्रकार पर भरोसा नहीं करूंगा। यह अच्छा होगा, लेकिन मैं इसे वास्तव में नहीं बना रहा हूं। # 1 कारण यह है कि कुछ हद तक जटिल इनपुट के लिए सर्वश्रेष्ठ UI निर्धारित करने के लिए यह ब्राउज़र पर बहुत अधिक बोझ डालता है। इसके बारे में सोचें कि एक प्रतिक्रियाशील दृष्टिकोण से, किसी भी विक्रेता को कैसे पता चलेगा कि आपके UI के साथ 400 पिक्सेल, 800 पिक्सेल और 1200 पिक्सेल चौड़े में क्या काम करेगा?

Comments

मैं सहमत नहीं हूं, ब्राउज़र को यह पता लगाने के लिए पर्याप्त स्मार्ट होना चाहिए। मैं वास्तव में डेट पिकर का उपयोग करके थक गया हूं और उन्हें अपडेट करते रहना चाहता हूं।

— 22U पर SuperUberDuper

अजीब तर्क। ब्राउज़रों के लिए बहुत अधिक बोझ, लेकिन जो वेब डेवलपर के लिए नहीं?!?

— जीरोन्ह

यह अब HTML 5 वर्किंग ड्राफ्ट का हिस्सा है: w3.org/html/wg/drafts/html/master/…

— क्रिस

मैं भी हर नए इनपुट प्रकार के लिए खुश हूं। वे बेहतर परिभाषित हैं, और मूल निवासी हैं, जो आमतौर पर उपवास का मतलब है।

— टॉम ज़ातो -

@MM धन्यवाद इस बीच HTML 5 को आधिकारिक W3C सिफारिश में अपग्रेड किया गया है। नया लिंक w3.org/TR/2014/REC-html5-20141028/…

— क्रिस

Answer 5

यहाँ YYYY-MM-DD में प्रारूपित तारीख के साथ एक पूर्ण उदाहरण है

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

Comments

किसी को पता है कि क्या यह विकल्प समय बीनने वाले को भी जोड़ने की अनुमति देता है?

— drooh

मैंने JSFiddle @Drooh में आपकी स्क्रिप्ट की कोशिश की लेकिन यह काम नहीं करता है। हर बार जब मैं इनपुट क्षेत्र में एक मिलीसेकंड की तरह दिखाई देने वाली तारीख का चयन करता हूं और फिर गायब हो जाता हूं। क्या कोई दिनांक कॉन्फ़िगरेशन dd / mm / yyyy के साथ एक वर्किंग फ़ेडल संस्करण प्रदान कर सकता है?

— रयान कूलवेब्स ने

ध्यान दें, अगस्त 2016 तक webshim jQuery 3 के साथ काम नहीं करता है और मेरे परीक्षण में यह 2.2.4 के साथ भी काम नहीं करता है।

— drooh

जब तक फ़ायरफ़ॉक्स एक तारीख इनपुट stackoverflow.com/questions/2528706/…

— drooh

Answer 6

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

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

अंतत: मैं @SuperUberDuper से सहमत हूं कि मोज़िला इस मूल को शामिल करने के पीछे है।

Comments

"समय" के लिए एक संस्करण है?

— मैल्कम सल्वाडोर

कृपया इस उदाहरण पर विस्तार करें। क्या यह इनपुट के लिए एक html विशेषता है?

— व्यर्थ_ कोडर

Answer 7

यह केवल एक सुझाव है जो डैक्स के उत्तर का अनुसरण करता है। (मैं इसे उस जवाब पर एक टिप्पणी में डालूंगा, लेकिन मेरे पास अभी तक दूसरों के सवालों पर टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा नहीं है)।

आईडी प्रत्येक क्षेत्र के लिए अद्वितीय होनी चाहिए, इसलिए, यदि आपके फॉर्म (या फॉर्म) में कई दिनांक फ़ील्ड हैं, तो आप आईडी के बजाय कक्षा तत्व का उपयोग कर सकते हैं:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

और आपके इनपुट के रूप में:

 <input type="text" class="datepicker" name="your-name" />

अब, हर बार जब आपको दिनांक पिकर की आवश्यकता होती है, तो बस उस वर्ग को जोड़ें। PS मुझे पता है, आपको अभी भी js का उपयोग करना है :(, लेकिन कम से कम आप अपनी सभी साइट के लिए सेट हैं। मेरे 2 सेंट ...

Answer 8

फ़ायरफ़ॉक्स का नवीनतम संस्करण फ़ायरफ़ॉक्स 57 (क्वांटम) दिनांक और अन्य विशेषताओं का समर्थन करता है जिसे 14 नवंबर, 2017 को जारी किया गया था। आप इस लिंक पर क्लिक करके इसे डाउनलोड कर सकते हैं

Answer 9

अलेक्जेंडर को धन्यवाद, मैंने एक तरीका पाया कि कैसे एन लैंग के लिए प्रारूप को संशोधित करें। (पता नहीं था कि कौन सा लैंग ऐसे प्रारूप का उपयोग करता है)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Comments

मुझे लगता है कि उस प्रारूप का उपयोग करने वाला एकमात्र 'एन' देश कनाडा है। किसी भी मामले में, 'एन' अस्पष्ट है, क्योंकि इसमें संयुक्त राज्य अमेरिका भी शामिल है, जिसका 'विशेष' तारीख प्रारूप बहुत अधिक है।

— माइकल शेपर

मेरे मामले में यह किसी भी क्लाइंट लोकेल के लिए तारीख प्रारूप को ओवरराइड करने के बारे में है, जो क्लाइंट वर्कस्टेशन पर भिन्न हो सकते हैं। हालाँकि एक विशेष पृष्ठ पर मैं इस तिथि प्रारूप (कॉपी पेस्ट कारण के लिए) का उपयोग करना चाहता हूं। यह अलेक्जेंडर फार्कस के उत्तर के लिए टिप्पणी की तरह है, लेकिन मैंने अलग उत्तर के रूप में रखा क्योंकि मैं टिप्पणी में कोड पेस्ट नहीं कर सकता। मैं उत्पादन वातावरण में एक वर्ष से अधिक समय से इसका उपयोग कर रहा हूं।

— पावेल निडोबा

सावधान रहे। अगर वेब्सीम लोकेल की ब्राउज़र व्याख्या पर निर्भर करता है, तो आपके पास अप्रत्याशित परिणाम हो सकते हैं। 'en' का मतलब अलग-अलग प्लेटफ़ॉर्म (सिस्टम लोकेल पर निर्भर) या अलग-अलग ब्राउज़र में भी एक ही प्रारूप नहीं होगा। यह कनाडा में एक ब्राउज़र द्वारा 'एन-सीए' के ​​रूप में व्याख्या की जा सकती है (जो कि सबसे अधिक yyyy-mm-dd है, लेकिन संभवतः सुसंगत नहीं है) लेकिन भारत में एक ब्राउज़र द्वारा 'en-in' (जो कि दुनिया के अधिकांश हिस्सों की तरह है) , dd-mm-yyyy का उत्पादन करेगा)। सिर्फ इसलिए कि यह उत्पादन कोड में है इसका मतलब यह नहीं है कि इसका ठीक से परीक्षण किया गया है - बड़ी साइटों पर भी उत्पादन कोड में बहुत सारे i18n कीड़े मौजूद हैं।

— माइकल शेपर

अंतिम पंक्ति $ .webshims.activeLang ('en'); ब्राउज़र सेटिंग को ओवरराइड करने वाले वेबसैम को लैंग (या लोकेल) को मजबूर करना चाहिए, इसलिए प्रारूप हमेशा एक जैसा होता है।

— पावेल निदोबा

Answer 10

कभी-कभी आप अपने प्रोजेक्ट में Datepicker http://jqueryui.com/datepicker/ का उपयोग नहीं करना चाहते क्योंकि:

• आप jquery का उपयोग नहीं करना चाहते हैं
• आपकी परियोजना में jquery संस्करणों का संघर्ष
• वर्ष का चुनाव सुविधाजनक नहीं है। उदाहरण के लिए आपको १० साल पहले जाने के लिए प्रचलित बटन पर १२० क्लिक की जरूरत है।

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

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [e-mail]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Comments

यह कोड पूरी तरह से विफल है। मैं एक तारीख में टाइप नहीं कर सकता क्योंकि फ़ील्ड पहले से ही "YYY-MM-DD" से भरा है, और अगर मैं इसे खाली करने की कोशिश करता हूं, तो यह फिर से दिखाई देता है।

— स्टीफन आर

कृपया हाइफ़न को न हटाएं। मैंने सफलतापूर्वक विंडोज 10 Google क्रोम 52, फ़ायरफ़ॉक्स 41, ओपेरा 39, माइक्रोसॉफ्ट एज, आईई 11 में परीक्षण किया है। कृपया मुझे अपना डिवाइस, ओएस और ब्राउज़र बताएं।

— Andrej

मैं वास्तव में आपकी टिप्पणी के ठीक नीचे "रन कोड स्निपेट" लिंक मार रहा हूं। मैं ठीक से तारीख नहीं लिख सकता क्योंकि "YYYY-MM-DD" प्लेसहोल्डर सक्रिय रूप से मेरे साथ प्रतिस्पर्धा कर रहा है जब मैं टाइप करना शुरू करने के बजाय गायब हो जाता हूं। मैं विंडोज 10. पर नवीनतम फ़ायरफ़ॉक्स का उपयोग कर रहा हूँ

— स्टीफन आर

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

— माइकटी

Answer 11

यहाँ उचित समाधान है। आपको हर जगह jquery खजूर का उपयोग करना चाहिए

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

नीचे पूर्ण कोड प्राप्त करने के लिए लिंक दिया गया है

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

Answer 12

यहाँ सही समाधान है। आपको उपयोगकर्ता इनपुट तिथि के लिए JQuery डेटपिकर का उपयोग करना चाहिए। इसका उपयोग करना बहुत आसान है और इसमें बहुत सारी विशेषताएं हैं जो HTML इनपुट तिथि के पास नहीं हैं।

JQuery डेटपिकर कोड को कॉपी करने के लिए यहां क्लिक करें

Answer 13

bootstrap-datepickerफ़ायरफ़ॉक्स 55 पोर्टेबल पर काम कर रहे कैलेंडर को प्राप्त करने के लिए मुझे प्लगइन का उपयोग करना पड़ा :

https://bootstrap-datepicker.readthedocs.io/en/latest/

बूटस्ट्रैप v2 और v3 के साथ संगत। यह एक स्टैंडअलोन स्टाइलशीट के साथ आता है ताकि आपको बूटस्ट्रैप पर निर्भर न होना पड़े।

उपयोग:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

Answer 14

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>