Disable native datepicker in Google Chrome

Question

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?

Answer 1

To hide the arrow:

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

And to hide the prompt:

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

Answer 2

If you have misused <input type="date" /> you can probably use:

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

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

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

Or you could give them a class:

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

Answer 3

You could use:

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

Answer 4

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

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

Answer 5

This 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 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):

$('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 is a simple custom String method to pad 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. So I have to make some changes:

I'm using jquery.ui.datepicker.mobile.js and made this 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, type text and add the var plug:

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

Answer 8

I use the following (coffeescript):

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

which gets converted to plain 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 worked for me:

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

Even though the value of the date fields was still there and correct, it did not display. That's why I reset the date values from my view model.

Answer 10

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 can I disable the new Chrome HTML5 date input?

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

Answer 11

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 Modernizr 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 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 the jquery-ui one is displayed in IE.

Answer 12

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

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

Answer 13

in HTML use prop "min"

    <input type="date" class="form-control" [min]="getDate()">

and in-class use this fun to get today's date.

   getDate(): string {
    return new Date().toISOString().split('T')[0];
   }

Answer 14

Not sure if i'm missing a trick or not here, but here goes:

I changed the type of the underlying input field from date to text. The effectivly disabled the native control and allowed a custom date time picker to show correctly.

<input type="text" id="Demo">

I was happy enough