发表新帖
发表新帖

How to make <input type=“date”> supported on all browsers? Any alternatives?

前端 未结
关注
11 2010
不知归路
不知归路 2020-11-29 16:57

I\'m working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can\'t understand on how to integrate it

相关标签:
11条回答
  • 野性不改
    2020-11-29 17:34

    Just use <script src="modernizr.js"></script> in the <head> section, and the script will add classes which help you to separate the two cases: if it's supported by the current browser, or if it's not.

    Plus follow the links posted in this thread. It will help you: HTML5 input type date, color, range support in Firefox and Internet Explorer

    0 讨论(0)
  • 甜味超标
    2020-11-29 17:36

    best easy and working solution i have found is, working on following browsers

    1. Google Chrome
    2. Firefox
    3. Microsoft Edge

    4. Safari

      <!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>
    0 讨论(0)
  • 再見小時候
    2020-11-29 17:41

    You asked for Modernizr example, so here you go. This code uses Modernizr to detect whether the 'date' input type is supported. If it isn't supported, then it fails back to JQueryUI datepicker.

    Note: You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code.

    <!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>

    I hope this works for you.

    0 讨论(0)
  • 陌清茗
    2020-11-29 17:44

    Chrome Version 50.0.2661.87 m does not support the mm-dd-yy format when assigned to a variable. It uses yy-mm-dd. IE and Firefox work as expected.

    0 讨论(0)
  • 渐次进展
    2020-11-29 17:45

    I was having problems with this, maintaining the UK dd/mm/yyyy format, I initially used the answer from adeneo https://stackoverflow.com/a/18021130/243905 but that didnt work in safari for me so changed to this, which as far as I can tell works all over - using the jquery-ui datepicker, jquery validation.

    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;
    }
}
    0 讨论(0)
  • 太阳男子
    2020-11-29 17:46

    Any browser that does not support the input type date will default to the standard type, which is text, so all you have to do is check the type property (not the attribute), if it's not date, the date input is not supported by the browser, and you add your own datepicker:

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

    FIDDLE

    You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.

    The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property.
    The attribute can still be used as a selector, as in the example above.

    0 讨论(0)
 看不清?
提交回复
热议问题