Chrome 类型 =“日期"和 jquery ui 日期选择器冲突 [英] Chrome type="date" and jquery ui date picker clashing

问题描述

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

I have a input box having type="date", everything works fine in IE but in latest version of Chrome it comes with a spinner, Down arrow and with a placeholder of mm/dd/yyyy.

在 Chrome 中，点击该字段 Chrome 会打开一个日期选择器，我已经映射了 jquery ui 的日期选择器供我的应用程序使用.这两者在他们身上发生冲突，如下所示:

In Chrome, on click of that field Chrome opens a datepicker and i have mapped jquery ui's datepicker for my application use. This both are clashing on them as shown below:

我已应用以下修复程序:

I have applied a fix as below:

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 **/

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

After adding the above code, it looks like wise:

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

The code above hides the spinner and arrow which fires the Chrome's date picker. But there is a problem, placeholder('mm/dd/yyyy') is still in there for the input textbox; my jquery ui's date picker is coming up fine but when i select any dates, the placeholder is still in there.

该输入框中未设置任何值.

No value is setting in that input box.

需要知道如何移除那个占位符来设置值；我用于应用程序的日期格式也是 yyyy/mm/dd.

Need to know how to remove that placeholder for setting the value; also the date format i am using for the application is yyyy/mm/dd.

Chrome 版本为:版本 27.0.1448.0

Chrome version is : Version 27.0.1448.0

提前致谢！！！

推荐答案

我以一种棘手的方式处理，我的日期字段为 type="text" 并且我添加了一个属性为 <代码>数据类型=日期"

I handled in a tricky way, i have my date field as type="text" and i have added an attribute as data-type="date"

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

In jquery, i am running a code to dynamically replace type="text & data-type="date" to type="date", so the browser doesn't make it a date field on load but my jquery ui datepicker is called as i am dynamically adding it as type="date"... :)

希望对大家有帮助..

这篇关于Chrome 类型 =“日期"和 jquery ui 日期选择器冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！