14

我有一个 type="date" 的输入框，在 IE 中一切正常，但在最新版本的 Chrome 中，它带有一个微调器、向下箭头和一个 mm/dd/yyyy 占位符。

在 Chrome 中，单击该字段 Chrome 会打开一个日期选择器，并且我已经映射了 jquery ui 的日期选择器以供我的应用程序使用。这两者都在它们上发生冲突，如下所示：

在此处输入图像描述

红色在 chrome 日期选择器下方显示 jquery ui 日期选择器

我已经应用了如下修复：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
    display:none !important;
    -webkit-appearance: none !important;
        visibility: hidden !important;
}
/** THIS DOESN'T WORK **/

添加上面的代码后，看起来很明智：

在此处输入图像描述

上面的代码隐藏了触发 Chrome 日期选择器的微调器和箭头。但是有一个问题，placeholder('mm/dd/yyyy') 仍然存在输入文本框；我的 jquery ui 的日期选择器运行良好，但是当我选择任何日期时，占位符仍然在那里。

该输入框中没有设置任何值。

需要知道如何删除该占位符以设置值；我用于应用程序的日期格式也是 yyyy/mm/dd。

Chrome 版本是：版本 27.0.1448.0

提前致谢！！！

4

6 回答 6

17

Chrome 27 现在支持 datepicker 字段类型（就像 Opera 一样）

如果支持日期字段，您可以使用modernizr.js 检查。如果浏览器支持日期字段，Modernizr.inputtypes.date 返回 true。

以下代码仅在不支持日期字段时设置 JQuery UI 日期选择器：

<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>

使用 Modernizr 检测 HTML5 功能并提供回退

于 2013-06-03T06:19:41.510 回答
12

我以一种棘手的方式处理，我的日期字段为type="text"，并且我添加了一个属性为data-type="date"

在 jquery 中，我正在运行一个代码来动态替换type="text& data-type="date"to type="date"，因此浏览器不会使其成为加载日期字段，但我的 jquery ui datepicker 被调用，因为我将其动态添加为type="date"... :)

希望它对某人有帮助..

于 2013-06-03T12:03:00.290 回答
8

您可以在以下小提琴中 删除类型"date"并将其切换为喜欢的类型：祝你好运jsfiddle"text"

removeDefaultDate = function(){
    $('input[type=date]').each(function(){
        this.type="text";
    });
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}
于 2014-07-22T20:33:06.593 回答
1

我有一个类似的问题。在我的模型/视图模型中，我将数据类型指定为 DataType.Date，当我删除它时，我注意到日期选择器开始在 Chrome 中工作。我认为尝试将数据类型更改为 DataType.DateTime 并在 chrome 中再次尝试。这解决了这个问题。不确定这是否适用于其他任何人，但这让我很头疼，所以这可能会对某人有所帮助。这在使用 jqueryUI 1.8.20 的 MVC4 中有效

于 2013-06-06T16:41:02.787 回答
1

谷歌在这篇文章的底部提供了另一种解决这种冲突的方法，我觉得这很有帮助。

var isDateInputSupported = function(){
  var elem = document.createElement('input');
  elem.setAttribute('type','date');
  elem.value = 'foo';
  return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();
于 2018-12-20T22:04:20.530 回答
0

他是我通常使用的。我使用了几种不同格式的日期选择器，因此我不会将其覆盖到所有日期输入。但是，将选择器更改为最适合您的。

<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
                $('.date-picker').datepicker(
                    {
                        showButtonPanel: true,
                        gotoCurrent: true,
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'slideDown'
                    }
                );
            }
});// END DOM Ready
</script>
于 2017-05-10T20:31:06.667 回答