2

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

这是我正在使用的 HTML：

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

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

4

4 回答 4

8

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

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

Modernizr 项目有一个 Wiki 页面，其中列出了一整套 polyfill 脚本。此页面至少包含两个用于填充该<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.
}

希望有帮助。

于 2013-07-29T16:31:56.163 回答
0

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

其中只有 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"
    });
});

日期框- 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"}'/>
于 2013-07-29T15:34:28.313 回答
0

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

于 2020-05-09T00:05:07.640 回答
-1

现在我会默认使用较新的 HTML5date输入，它们在移动设备上提供相同的原生体验，优于任何日期选择器，并且具有跨设备一致性的优点。

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

于 2015-09-16T11:21:32.697 回答