सभी ब्राउज़रों पर समर्थित <इनपुट प्रकार = "दिनांक"> कैसे बनाएं? कोई विकल्प?

Question 1

मैं HTML5 एलिमेंट्स इनपुट विशेषताओं के साथ काम कर रहा हूं और केवल Google Chrome ही दिनांक, समय विशेषताओं का समर्थन करता है। मैंने मॉर्डनिज़्र की कोशिश की, लेकिन मैं समझ नहीं पा रहा हूं कि इसे अपनी वेबसाइट पर कैसे एकीकृत किया जाए (इसे कैसे कोड किया जाए / वाक्य रचना क्या है / इसमें शामिल है)। किसी भी कोड स्निपेट पर तारीख, समय के साथ काम करने के लिए सभी ब्राउज़रों के लिए विशेषता है।

Question 2

कोई भी ब्राउज़र जो इनपुट प्रकार का समर्थन नहीं करता dateहै वह मानक प्रकार के लिए डिफ़ॉल्ट होगा, जो कि text, इसलिए आपको केवल इतना करना है कि प्रकार की संपत्ति (विशेषता नहीं) की जांच करें , यदि ऐसा नहीं है date, तो तिथि इनपुट ब्राउज़र द्वारा समर्थित नहीं है; और आप अपनी खुद की तारीख जोड़ें:

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

बेला

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

typeविशेषता कभी नहीं बदलता, ब्राउज़र केवल डिफ़ॉल्ट करना प्रारंभ कर देगा text, संपत्ति के लिए प्रकार तो एक संपत्ति की जांच करने के है।
विशेषता को अभी भी चयनकर्ता के रूप में उपयोग किया जा सकता है, जैसा कि ऊपर दिए गए उदाहरण में है।

Question 3

Modernizr वास्तव में कुछ भी नहीं बदलता है कि नए HTML5 इनपुट प्रकार कैसे संभाले जाते हैं। यह एक सुविधा है डिटेक्टर , नहीं एक परत (के अलावा <header>, <article>आदि है, जो यह करने के लिए इसी ब्लॉक तत्वों के रूप में नियंत्रित किया जा करने के लिए की परतें <div>)।

उपयोग करने के लिए <input type='date'>, आपको Modernizr.inputtypes.dateअपनी स्वयं की स्क्रिप्ट में जांच करनी होगी , और यदि यह गलत है, तो एक अन्य प्लगइन चालू करें जो एक तिथि चयनकर्ता प्रदान करता है। आपके पास चुनने के लिए हजारों हैं; मॉर्डनिज़्र पॉलीफ़िल की एक नॉन-एक्सक्लूसिव सूची रखता है जो आपको शुरू करने के लिए कहीं और दे सकता है। वैकल्पिक रूप से, आप बस इसे जाने दे सकते हैं - सभी ब्राउज़र वापस आते हैं textजब इनपुट प्रकार के साथ प्रस्तुत किया जाता है जिसे वे पहचानते नहीं हैं, इसलिए सबसे खराब यह हो सकता है कि आपके उपयोगकर्ता को तारीख में टाइप करना है। (आप उन्हें ट्रैक पर रखने के लिए प्लेसहोल्डर देना चाहते हैं या jQuery.maskedinput जैसी किसी चीज़ का उपयोग करना चाहते हैं।)

Question 4

आपने मॉडर्निज़्र उदाहरण के लिए कहा, इसलिए यहां आप जाएं। यह कोड यह पता लगाने के लिए मॉडर्निज़्र का उपयोग करता है कि क्या 'दिनांक' इनपुट प्रकार समर्थित है। यदि यह समर्थित नहीं है, तो यह JQueryUI डेटपिकर में वापस विफल हो जाता है।

नोट: आपको JQueryUI डाउनलोड करना होगा और संभवतः अपने स्वयं के कोड में CSS और JS फ़ाइलों में पथ बदलना होगा।

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <script type="text/javascript">
            $(function(){
                if(!Modernizr.inputtypes.date) {
                    console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
                    $("#theDate").datepicker();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

मुझे उम्मीद है कि यह आपके लिए काम करेगा।

Question 5

   <script>
      var datefield = document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
      }
   </script>

 <script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($) { // on document.ready
           $('#birthday').datepicker();
       }); <- missing semicolon
    }
 </script>

<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20">
   <input type="button" value="Submit" name="B1">
 </form>
</body>

स्रोत 1 और स्रोत 2

Question 6

यह एक राय का टुकड़ा है, लेकिन हमें वेबशीम्स के साथ बड़ी सफलता मिली । यदि नेटिव उपलब्ध नहीं है तो यह jQuery डेटपिकर का उपयोग करने के लिए सफाई से क्षय कर सकता है। यहां डेमो करें

Question 7

बस अनुभाग <script src="modernizr.js"></script>में उपयोग करें <head>, और स्क्रिप्ट उन कक्षाओं को जोड़ेगी जो आपको दो मामलों को अलग करने में मदद करती हैं: यदि यह वर्तमान ब्राउज़र द्वारा समर्थित है, या यदि नहीं।

प्लस इस धागे में पोस्ट लिंक का पालन करें। यह आपकी सहायता करेगा: फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में एचटीएमएल 5 इनपुट प्रकार की तिथि, रंग, रेंज समर्थन

Question 8

Chrome संस्करण 50.0.2661.87 m एक चर में असाइन किए जाने पर mm-dd-yy प्रारूप का समर्थन नहीं करता है। यह yy-mm-dd का उपयोग करता है। IE और फ़ायरफ़ॉक्स उम्मीद के मुताबिक काम करते हैं।

Question 9

सबसे आसान और कारगर उपाय जो मुझे मिला है वह है, निम्न ब्राउज़रों पर काम करना

गूगल क्रोम
फ़ायर्फ़ॉक्स
माइक्रोसॉफ्ट बढ़त

सफारी

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>

Question 10

दो-स्क्रिप्ट-शामिल-समाधान (2019):

बस अपने स्क्रिप्ट अनुभाग में बेटर-डोम और बेटर-डेटिनपुट-पॉलीफ़िल शामिल करें।

यहाँ एक डेमो है:
http://chemerisuk.github.io/better-dateinput-polyfill/

Question 11

मुझे इससे समस्याएँ हो रही थीं, UK dd / mm / yyyy प्रारूप को बनाए रखना, मैंने शुरू में adeneo https://stackoverflow.com/a/18021130/243905 से उत्तर का उपयोग किया था, लेकिन मेरे लिए सफारी में काम नहीं किया, इसलिए इसे बदल दिया गया, जहाँ तक मैं बता सकता हूँ सभी काम करता है - jquery-ui datepicker, jquery सत्यापन का उपयोग करके।

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}

Question 12

<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>

<script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { // on document.ready
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>