如何让IE支持IE中的日期选择器

当我使用jquery mobile在IE中为日期创建输入标记时，没有像chrome中那样显示的日历弹出窗口。有没有一个插件可以下载，为IE创建一个日历弹出窗口？

这是我正在使用的HTML：

<input id="EndDate" name="EndDate" type="date" value="">

内置日期选择器并不是在我测试过的所有版本的IE中都可用（IE 8、9、10等）

任何版本的IE都不支持<input type="date">作为本机功能。

最好的解决方案是使用"Polyfill"脚本。Polyfills是为添加对某些浏览器中可能缺少的功能的支持而编写的小型脚本。通常，它们允许网站作者编写正常的标准HTML或CSS代码，polyfill脚本在幕后完成工作，使功能发挥作用。

Modernizr项目有一个Wiki页面，其中列出了一整堆polyfill脚本。此页面至少包含两个多填充<input type='date'>功能的脚本。我建议先试用这些脚本。（网上可能还有其他网站，但如果Modernizr推荐它们，那么它们可能是最好的）

说到Modernizr，你可能也想使用这个脚本，因为它的工作是帮助你确定浏览器支持什么功能，从而确定你是否需要加载polyfill脚本。

Modernizr网站上有关于如何进行浏览器功能检测以及如何使用Moderniz加载polyfill脚本的良好说明，所以我不会在这里重复。

或者，如果你不想使用Modernizr，你可以编写自己的特征检测脚本——这很容易。像这样的东西应该可以做到：

function browserSupportsDateInput() {
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    return i.type !== "text";
}

然后你会这样使用它：

if(!browserSupportsDateInput()) {
    //not supported, so run the polyfill script instead.
}

希望能有所帮助。

您可以始终为jQuery Mobile使用第三方日期选择器。

其中只有3个提到了麦芽汁，每个都可以配置为显示特定的日期格式，并且每个都适用于所有设备。你我会推荐你Mobiscroll，因为它的皮肤看起来像本地的移动/桌面日期选择器。

移动滚动-http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick-http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

日期框-http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>

您可以在IE中使用bootstrap日期选择器来解决此问题。我将此日期选择器用于所有具有bootstrap 4.3.1和jquery 3.3.1的浏览器。

/*call from your document ready code*/
function handleDocumentReady(){
     $('some selector').datepicker({
                       todayBtn: "linked",
                       language: "en",
                       autoclose: true,
                       todayHighlight: true,
                       dateFormat: 'M/d/yyyy'
                   });
}

//I use plain old text inputs with custom date validation 
//because I don't like the date validation in some browsers
//,so I copy the values from the text inputs to the date inputs before form submission
//needed to prep date values to be submitted in a form
function beforeSubmit(){
  var isEnglish = "en" == "en";
  var startDate = document.getElementById('startDate');
  var endDate = document.getElementById('endDate');
  if (isEnglish) {
  //ie 6 stuff  (must come before html 5 browser stuff)
     $('#startDate').datepicker('setDate', new Date($('#startDateUI').val()));
     $('#endDate').datepicker('setDate', new Date($('#endDateUI').val()));
  //html 5 compatible browser stuff
     endDate.valueAsDate = new Date($('#endDateUI').val());
     startDate.valueAsDate = new Date($('#startDateUI').val());
  } else {
  //ie 6 stuff (must come before html 5 browser stuff)
     $('#startDate').datepicker("setDate", getCurrentTimezoneDate($('#startDateUI').val()));
     $('#endDate').datepicker("setDate", getCurrentTimezoneDate($('#endDateUI').val()));
  //html5 browser stuff
     var dpg = $.fn.datepicker.DPGlobal;
     endDate.valueAsDate = dpg.parseDate($('#endDateUI').val(), dpg.parseFormat('dd/mm/yyyy'));
     startDate.valueAsDate = dpg.parseDate($('#startDateUI').val(), dpg.parseFormat('dd/mm/yyyy'));
  }
}

                function getCurrentTimezoneDate(target) {
                    var dpg = $.fn.datepicker.DPGlobal;
                    var d = dpg.parseDate(target, dpg.parseFormat('dd/mm/yyyy'));
                    d.setMinutes(d.getMinutes() + d.getTimezoneOffset());
                    console.debug(d);
                    return d;
                }

现在我默认使用更新的HTML5 date输入，它们在移动设备上提供了相同的本地体验，优于任何日期选择器，并具有跨设备一致性的优势。

<input type="date">

到目前为止，只有Chrome在桌面上支持它，可以公平地假设其他浏览器最终会赶上，因此我们应该首先使用它进行开发，并使用JS来捕捉边缘情况，而我们仍然必须这样做。

我会使用Modernizr来处理这些边缘案例：

if !Modernizr.inputtypes.date
  // initialise your own datepicker 
  // eg. http://amsul.ca/pickadate.js - which has the best support I've seen (IE8+)

通过这种方式，所有可以支持date输入的浏览器都将启动JS日期选择器，其他一切都将启动。加上"最终"分解JS的额外好处，在未来真的很容易。

相关内容

最新更新

热门标签：