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

问题描述 投票:2回答:4

[当我使用jquery mobile在IE中为日期创建输入标签时,没有显示如chrome中的日历弹出窗口。我可以下载一个可以为IE创建日历弹出窗口的插件吗?

这是我正在使用的HTML:

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

并且内置的日期选择器并非在我测试过的所有版本的IE中都可用(IE 8、9、10等)

internet-explorer jquery-mobile datepicker
4个回答
6
投票

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

最佳解决方案是使用“填充”脚本。 Polyfill是编写用于增加对某些浏览器可能缺少的功能的支持的小型脚本。通常,它们允许站点作者编写其标准的HTML或CSS标准代码,而polyfill脚本在幕后进行工作,以使功能正常工作。

The 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.
}

希望有所帮助。


0
投票

您总是可以将第3方日期选择器用于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"}'/>

0
投票

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

/*call from your document ready code*/
function handleDocumentReady(){
     $('[data-type=date]').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;
                }

-1
投票

现在,默认情况下,我将使用较新的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分解出来。

© www.soinside.com 2019 - 2024. All rights reserved.