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

问题描述

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

在Chrome中，点击该字段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; <  - 悬停时崩溃Chrome * / 
 -webkit-appearance：none; 
 margin：0; 
} 
 / **这不工作** / 
输入[type =date] ::  -  webkit-input-placeholder {
 display：none！important ; 
 -webkit-appearance：none！important; 
可见度：隐藏！重要; 
} 
 / **这不工作** / 
  

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

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

该输入框中没有设置值。

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

Chrome版本是：版本27.0.1448.0

提前谢谢

解决方案

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

在jquery中，我正在运行代码来动态替换 type =text & data-type =日期到 type =date，所以浏览器不会使其成为加载日期字段，但我的jquery ui datepicker被称为我动态添加它作为 type =date ...：）

希望对某人有帮助..

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.

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:

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.

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 version is : Version 27.0.1448.0

Thanks in advance!!!

解决方案

I handled in a tricky way, i have my date field as type="text" and i have added an attribute as data-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"... :)

Hope it is helpful to someone..

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