Question

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

这是我正在使用的HTML：

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

我测试过的所有IE版本都没有内置的日期选择器（IE 8,9,10等）

Answer 1

任何版本的IE都不支持

<input type="date">作为本机功能。

最佳解决方案是使用“Polyfill”脚本。 Polyfill是一种小脚本，用于添加对某些浏览器中可能缺少的功能的支持。通常，它们允许站点作者编写正常的标准HTML或CSS代码，并且polyfill脚本完成幕后工作以使该功能正常工作。

Modernizr项目有a Wiki page that lists a whole stack of polyfill scripts。此页面包含至少两个填充<input type='date'>功能的脚本。我建议先试试这些脚本。（网上可能有其他人，但如果Modernizr推荐他们，那么他们可能是那里最好的）

谈到Modernizr，您可能也希望使用此脚本，因为它的工作是帮助您确定浏览器支持哪些功能，从而确定是否需要加载polyfill脚本。

Modernizr网站有关于如何进行浏览器功能检测以及如何使用Modernizr加载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.
}

希望有所帮助。

Answer 2

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

其中只有3个提示，并且每个都可以配置为显示某种日期格式，并且每个日期格式都适用于所有设备。你会推荐Mobiscroll，因为它的外观看起来像本机移动/桌面日期选择器。

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"
    });
});

Datebox - 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"}'/>

Answer 3

您可以使用引导日期选择器来解决IE中的此问题。我将这个datepicker用于所有具有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;
                }

Answer 4

现在我默认使用较新的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 datepicker。随着“最终＆＃39;的额外奖励在将来很容易将JS分解出来。

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

4 个答案: