Disable native datepicker in google chrome

Question

Date picker has landed on Chrome 20, is there any attribute to disable it? My whole system uses jQuery UI datepicker, which is a crossbrowser, so I want to disconnect my datepicker from Chrome. Is there a tag attribute?

Answer 1

To hide the arrow:

input::-webkit-calendar-picker-indicator{ display: none; } 

And to hide the invitation:

 input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; } 

Answer 2

If you used <input type="date" /> incorrectly, you can probably use:

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

after they boot up to turn them into text inputs. First you need to attach your custom datepicker:

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

Or you can give them a class:

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

Answer 3

You can use:

 jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker(); 

Answer 4

With Modernizr ( http://modernizr.com/ ), he can test this functionality. Then you can bind it to a logical return:

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

Answer 5

It worked for me

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

Answer 6

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

 $('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'); } }); 

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

Answer 7

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

I use jquery.ui.datepicker.mobile.js and made the following changes:

From (line 51)

 $( "input[type='date'], input:jqmData(type='date')" ).each(function(){ 

to

 $( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){ 

and in the form use, enter the text and add the var variable:

 <input type="text" plug="date" name="date" id="date" value=""> 

Answer 8

I am using the following (coffeescript):

 $ -> # disable chrome html5 datepicker for datefield in $('input[data-datepicker=true]') $(datefield).attr('type', 'text') # enable custom datepicker $('input[data-datepicker=true]').datepicker() 

which translates to simple javascript:

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

Answer 9

This works for me:

 ; (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); 

See also:

How to disable new date input in HTML HTML format?

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

Answer 10

I know this is an old question now, but I just landed here, looking for information about it so that someone else could too.

You can use Modernizr to determine if the browser supports HTML5 input types, such as date. If this happens, these controls will use their own behavior to display things like datepickers. If this is not the case, you can specify that you need to use a script to display your own datepicker. Works well for me!

I added jquery-ui and Modernizr to my page, then added this code:

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

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

Answer 11

For Laravel5 Since used

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

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

DECISION:

$ ('input [type = "Date"]') Attr ('type', 'text') ;.

 $("#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');