CODEWITHSUNDEEP
htmlgoogle-chromedatepicker
Alexandre
Alexandre

Reputation: 7212

Disable native datepicker in Google Chrome

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?

Upvotes: 93

Views: 115089

Answers (14)

PowerMan2015
PowerMan2015

Reputation: 1418

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

Upvotes: 0

Sherif Fahd
Sherif Fahd

Reputation: 131

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];
   }

Upvotes: 0

Cogitator
Cogitator

Reputation: 154

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.

Upvotes: 1

Mathieu Dierckx
Mathieu Dierckx

Reputation: 104

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

Upvotes: 0

rjmunro
rjmunro

Reputation: 28076

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

Upvotes: 57

Mantisimo
Mantisimo

Reputation: 4283

This worked for me

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

Upvotes: 7

Philip Stratford
Philip Stratford

Reputation: 4733

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.

Upvotes: 0

Jeff Tian
Jeff Tian

Reputation: 5893

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

Upvotes: 0

Paolo Dona
Paolo Dona

Reputation: 29

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

Upvotes: 1

CodeFinity
CodeFinity

Reputation: 1350

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

Upvotes: 7

ebelendez
ebelendez

Reputation: 908

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

Upvotes: 1

Yacine Zalouani
Yacine Zalouani

Reputation: 8189

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

Upvotes: 148

MartijnR
MartijnR

Reputation: 31

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)

Upvotes: 2

Jimbo
Jimbo

Reputation: 364

You could use:

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

Upvotes: 16

Related Questions