blocks|key|529464|text|要隐藏箭头，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529465|input::-webkit-calendar-picker-indicator{
++++display:+none;
}|code-block|syntax|javascript|529466|并隐藏提示：|529467|input[type="date"]::-webkit-input-placeholder{+
++++visibility:+hidden+!important;
}|529468|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To hide the arrow:

<pre><code>input::-webkit-calendar-picker-indicator{
 display: none;
}
</code></pre>

And to hide the prompt:

<pre><code>input[type="date"]::-webkit-input-placeholder{ 
 visibility: hidden !important;
}
</code></pre>

blocks|key|312603|text|如果您误用了<input+type="date"+/>，您可能可以使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|312604|$('input[type="date"]').attr('type','text');|code-block|syntax|javascript|312605|在它们加载后，将它们转换为文本输入。您需要首先附加您的自定义datepicker：|312606|$('input[type="date"]').datepicker().attr('type','text');|312607|或者你可以给他们一个类：|312608|$('input[type="date"]').addClass('date').attr('type','text');|312609|entityMap^0|6|L|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

If you have misused <code>&lt;input type="date" /&gt;</code> you can probably use:

<pre><code>$('input[type="date"]').attr('type','text');
</code></pre>

after they have loaded to turn them into text inputs. You'll need to attach your custom datepicker first:

<pre><code>$('input[type="date"]').datepicker().attr('type','text');
</code></pre>

Or you could give them a class:

<pre><code>$('input[type="date"]').addClass('date').attr('type','text');
</code></pre>

blocks|key|312486|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312487|jQuery('input[type="date"]').live('click',+function(e)+{e.preventDefault();}).datepicker();|code-block|syntax|javascript|312488|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could use:

<pre class="lang-js prettyprint-override"><code>jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
</code></pre>

blocks|key|529560|text|使用现代(http://modernizr.com/)，它可以检查该功能。然后，您可以将其绑定到它返回的布尔值：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|529561|//+does+not+trigger+in+Chrome,+as+the+date+Modernizr+detects+the+date+functionality.
if+(!Modernizr.inputtypes.date)+{+
++++$("#opp-date").datepicker();
}|code-block|syntax|javascript|529562|entityMap|0|LINK|mutability|MUTABLE|url|http://modernizr.com/^0|5|L|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

With Modernizr (<a href="http://modernizr.com/">http://modernizr.com/</a>), it can check for that functionality. Then you can tie it to the boolean it returns:

<pre><code>// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
 $("#opp-date").datepicker();
}
</code></pre>

blocks|key|312813|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312814|input[type=date]::-webkit-inner-spin-button,+
input[type=date]::-webkit-outer-spin-button+{+
++-webkit-appearance:+none;+
++margin:+0;+
}|code-block|syntax|javascript|312815|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me

<pre><code>input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
 -webkit-appearance: none; 
 margin: 0; 
}
</code></pre>

blocks|key|529424|text|上面的代码没有设置input元素的值，也没有触发change事件。以下代码可在Chrome和Firefox中运行(未在其他浏览器中测试)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529425|$('input[type="date"]').click(function(e){
+++++e.preventDefault();
}).datepicker({
++++onSelect:+function(dateText){
++++++++var+d+=+new+Date(dateText),
++++++++dv+=+d.getFullYear().toString().pad(4)%2B'-'%2B(d.getMonth()%2B1).toString().pad(2)%2B'-'%2Bd.getDate().toString().pad(2);
++++++++$(this).val(dv).trigger('change');
++++}
});|code-block|syntax|javascript|529426|pad是一个简单的自定义字符串方法，用于用零填充字符串(必需)|529427|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The code above doesn't set the value of the input element nor does it fire a change event. The code below works in Chrome and Firefox (not tested in other browsers):

<pre><code>$('input[type="date"]').click(function(e){
 e.preventDefault();
}).datepicker({
 onSelect: function(dateText){
 var d = new Date(dateText),
 dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2);
 $(this).val(dv).trigger('change');
 }
});
</code></pre>

pad is a simple custom String method to pad strings with zeros (required)

blocks|key|529524|text|我同意Robertc的观点，最好的方法是不使用type=date，但我的JQuery移动数据采集器插件使用它。因此，我必须做一些更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529525|我使用的是jquery.ui.datepicker.mobile.js，并做了以下更改：|529526|From+(第51行)|529527|$(+"input[type='date'],+input:jqmData(type='date')"+).each(function(){|code-block|syntax|javascript|529528|至|529529|$(+"input[plug='date'],+input:jqmData(plug='date')"+).each(function(){|529530|在表单use中，键入text并添加var插头：|529531|<input+type="text"+plug="date"+name="date"+id="date"+value="">|529532|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I agree with Robertc, the best way is not to use type=date but my JQuery Mobile Datepicker plugin uses it. So I have to make some changes:

I'm using jquery.ui.datepicker.mobile.js and made this changes:

From (line 51)

<pre><code>$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
</code></pre>

to

<pre><code>$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){
</code></pre>

and in the form use, type text and add the var plug:

<pre><code>&lt;input type="text" plug="date" name="date" id="date" value=""&gt;
</code></pre>

blocks|key|312722|text|我使用以下代码(coffeescript)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312723|$+->
++#+disable+chrome's+html5+datepicker
++for+datefield+in+$('input[data-datepicker=true]')
++++$(datefield).attr('type',+'text')
++#+enable+custom+datepicker
++$('input[data-datepicker=true]').datepicker()|code-block|syntax|javascript|312724|它被转换成普通的javascript：|312725|(function()+{
++$(function()+{
++++var+datefield,+_i,+_len,+_ref;
++++_ref+=+$('input[data-datepicker=true]');
++++for+(_i+=+0,+_len+=+_ref.length;+_i+<+_len;+_i%2B%2B)+{
++++++datefield+=+_ref[_i];
++++++$(datefield).attr('type',+'text');
++++}
++++return+$('input[data-datepicker=true]').datepicker();
++});+
}).call(this);|312726|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I use the following (coffeescript):

<pre><code>$ -&gt;
 # disable chrome's html5 datepicker
 for datefield in $('input[data-datepicker=true]')
 $(datefield).attr('type', 'text')
 # enable custom datepicker
 $('input[data-datepicker=true]').datepicker()
</code></pre>

which gets converted to plain javascript:

<pre><code>(function() {
 $(function() {
 var datefield, _i, _len, _ref;
 _ref = $('input[data-datepicker=true]');
 for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
 datefield = _ref[_i];
 $(datefield).attr('type', 'text');
 }
 return $('input[data-datepicker=true]').datepicker();
 }); 
}).call(this);
</code></pre>

blocks|key|312734|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312735|;
(function+($)+{
++++$(document).ready(function+(event)+{
++++++++$(document).on('click+input',+'input[type="date"],+input[type="text"].date-picker',+function+(e)+{
++++++++++++var+$this+=+$(this);
++++++++++++$this.prop('type',+'text').datepicker({
++++++++++++++++showOtherMonths:+true,
++++++++++++++++selectOtherMonths:+true,
++++++++++++++++showButtonPanel:+true,
++++++++++++++++changeMonth:+true,
++++++++++++++++changeYear:+true,
++++++++++++++++dateFormat:+'yy-mm-dd',
++++++++++++++++showWeek:+true,
++++++++++++++++firstDay:+1
++++++++++++});

++++++++++++setTimeout(function()+{
++++++++++++++++$this.datepicker('show');
++++++++++++},+1);
++++++++});
++++});
})(jQuery,+jQuery.ui);|code-block|syntax|javascript|312736|另请参阅：|312737|How+can+I+disable+the+new+Chrome+HTML5+date+input?|offset|length|312738|http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx|312739|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11270675/how-can-i-disable-the-new-chrome-html5-date-input/25910154#25910154|1^0|0|0|0|0|1E|0|0|0|2S|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@$K|11|L|12|1|13]]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@$K|15|L|16|1|17]]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|N]]]]

This works for me:

<pre><code>;
(function ($) {
 $(document).ready(function (event) {
 $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
 var $this = $(this);
 $this.prop('type', 'text').datepicker({
 showOtherMonths: true,
 selectOtherMonths: true,
 showButtonPanel: true,
 changeMonth: true,
 changeYear: true,
 dateFormat: 'yy-mm-dd',
 showWeek: true,
 firstDay: 1
 });

 setTimeout(function() {
 $this.datepicker('show');
 }, 1);
 });
 });
})(jQuery, jQuery.ui);
</code></pre>

See also:

<a href="https://stackoverflow.com/questions/11270675/how-can-i-disable-the-new-chrome-html5-date-input/25910154#25910154">How can I disable the new Chrome HTML5 date input?</a>

<a href="http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx" rel="nofollow noreferrer">http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx</a>

blocks|key|529666|text|我知道这是一个古老的问题，但我只是来到这里寻找关于这方面的信息，以便其他人也可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529667|你可以使用Modernizr来检测浏览器是否支持HTML5输入类型，比如'date‘。如果是这样，这些控件将使用本机行为来显示诸如日期选择器之类的内容。如果没有，您可以指定应该使用哪个脚本来显示您自己的日期选择器。对我来说效果很好！|offset|length|529668|我在我的页面中添加了jquery-ui和Modernizr，然后添加了以下代码：|529669|<script+type="text/javascript">
++++Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls);
++++initDateControls();

++++function+initDateControls()+{
++++++++//Adds+a+datepicker+to+inputs+with+a+type+of+'date'+when+the+browser+doesn't+support+that+HTML5+tag+(type=date)'
++++++++Modernizr.load({
++++++++++++test:+Modernizr.inputtypes.datetime,
++++++++++++nope:+"scripts/jquery-ui.min.js",
++++++++++++callback:+function+()+{
++++++++++++++++$("input[type=date]").datepicker({+dateFormat:+"dd-mm-yy"+});
++++++++++++}
++++++++});
++++}

</script>|code-block|syntax|javascript|529670|这意味着原生datepicker显示在Chrome中，而jquery-ui+one显示在IE中。|529671|entityMap|0|LINK|mutability|MUTABLE|url|http://modernizr.com/|1|http://jqueryui.com/^0|0|5|9|0|0|A|9|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

I know this is an old question now, but I just landed here looking for information about this so somebody else might too.

You can use <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> to detect whether the browser supports HTML5 input types, like 'date'. If it does, those controls will use the native behaviour to display things like datepickers. If it doesn't, you can specify what script should be used to display your own datepicker. Works well for me!

I added <a href="http://jqueryui.com/" rel="nofollow">jquery-ui</a> and Modernizr to my page, then added this code:

<pre><code>&lt;script type="text/javascript"&gt;
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls);
 initDateControls();

 function initDateControls() {
 //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)'
 Modernizr.load({
 test: Modernizr.inputtypes.datetime,
 nope: "scripts/jquery-ui.min.js",
 callback: function () {
 $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" });
 }
 });
 }

&lt;/script&gt;
</code></pre>

This means that the native datepicker is displayed in Chrome, and the jquery-ui one is displayed in IE.

blocks|key|529717|text|对于Laravel5，因为使用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529718|{!！Form::input('date'，'date_start'，null，'class‘=>’表单控件‘，'id’=>+'date_start'，'name‘=>+'date_start')+!!}|529719|=>+Chrome将强制其日期选择器。=>如果你用css去掉它，你会得到常见的格式错误！！(指定的值不符合要求的格式yyyy-MM-dd。)|529720|解决方案：|529721|$('inputtype="date"').attr('type'，'text')；|529722|$("#date_start").datepicker({
++++autoclose:+true,
++++todayHighlight:+true,
++++dateFormat:+'dd/mm/yy',
++++changeMonth:+true,
++++changeYear:+true,
++++viewMode:+'months'
});
$("#date_stop").datepicker({
++++autoclose:+true,
++++todayHighlight:+true,
++++dateFormat:+'dd/mm/yy',
++++changeMonth:+true,
++++changeYear:+true,
++++viewMode:+'months'
});
$(+"#date_start"+).datepicker().datepicker("setDate",+"1d");
$(+"#date_stop"+).datepicker().datepicker("setDate",+'2d');|code-block|syntax|javascript|529723|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

For Laravel5
Since one uses 

{!! Form::input('date', 'date_start', null , ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}

=> Chrome will force its datepicker.
=> if you take it away with css you will get the usual formatting errors!!
(The specified value does not conform to the required format, "yyyy-MM-dd".)

SOLUTION:

$('input[type="date"]').attr('type','text');

<pre><code>$("#date_start").datepicker({
 autoclose: true,
 todayHighlight: true,
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true,
 viewMode: 'months'
});
$("#date_stop").datepicker({
 autoclose: true,
 todayHighlight: true,
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true,
 viewMode: 'months'
});
$( "#date_start" ).datepicker().datepicker("setDate", "1d");
$( "#date_stop" ).datepicker().datepicker("setDate", '2d');
</code></pre>

blocks|key|312883|text|在HTML中使用属性"min“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312884|++++<input+type="date"+class="form-control"+[min]="getDate()">|code-block|syntax|javascript|312885|在课堂上利用这个乐趣来获取今天的日期。|312886|+++getDate():+string+{
++++return+new+Date().toISOString().split('T')[0];
+++}|312887|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

in HTML use prop &quot;min&quot;
<pre><code> &lt;input type=&quot;date&quot; class=&quot;form-control&quot; [min]=&quot;getDate()&quot;&gt;
</code></pre>
and in-class use this fun to get today's date.
<pre><code> getDate(): string {
 return new Date().toISOString().split('T')[0];
 }
</code></pre>

Date picker landed on Chrome 20, is there any attribute to disable it?
My entire system uses jQuery UI datepicker and it's crossbrowser, so, I want to disable Chrome native datepicker. Is there any tag attribute?

Disable native datepicker in Google Chrome

jQuery

HTML5

日期选择器登陆Chrome20，有什么属性可以禁用它吗？我的整个系统都使用Chrome日期选择器，而且它是跨浏览器的，所以我想禁用jQuery原生日期选择器。有没有什么标签属性？

问在Google Chrome中禁用本地datepicker
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Google Chrome中禁用本地datepickerEN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Google Chrome中禁用本地datepicker
EN