发表新帖
发表新帖

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

前端 未结
关注
11 2011
不知归路
不知归路 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:50 
    <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>
    0 讨论(0)
  • 暖寄归人
    2020-11-29 17:52

    This is bit of an opinion piece, but we had great success with WebShims. It can decay cleanly to use jQuery datepicker if native is not available. Demo here

    0 讨论(0)
  • 逝去的感伤
    2020-11-29 17:55

    Modernizr doesn't actually change anything about how the new HTML5 input types are handled. It's a feature detector, not a shim (except for <header>, <article>, etc., which it shims to be handled as block elements similar to <div>).

    To use <input type='date'>, you'd need to check Modernizr.inputtypes.date in your own script, and if it's false, turn on another plugin that provides a date selector. You have thousands to choose from; Modernizr maintains a non-exhaustive list of polyfills that might give you somewhere to start. Alternatively, you could just let it go - all browsers fall back to text when presented with an input type they don't recognize, so the worst that can happen is that your user has to type in the date. (You might want to give them a placeholder or use something like jQuery.maskedinput to keep them on track.)

    0 讨论(0)
  • 孤街浪徒
    2020-11-29 17:56

    Two-Script-Include-Solution (2019):

    Just include Better-Dom and Better-Dateinput-Polyfill in your scripts section.

    Here is a Demo:
    http://chemerisuk.github.io/better-dateinput-polyfill/

    0 讨论(0)
  • 北海茫月
    2020-11-29 17:58 
       <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>

    SOURCE 1 & SOURCE 2

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