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

User · Answer

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    lt input type  text  plug  date  name  date  id  date  value    gt

User · Answer

I use the following  coffeescript      - 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     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  lt   len   i            datefield    ref  i           datefield  attr  type    text              return    input data-datepicker true    datepicker              call this

User · Answer

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    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    This means that the native datepicker is displayed in Chrome  and the jquery-ui one is displayed in IE

User · Answer

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

User · Answer

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

User · Answer

You could use   jQuery  input type  date     live  click   function e   e preventDefault      datepicker

User · Answer

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

User · Answer

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

User · Answer

If you have misused  lt input type  date    gt  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

User · Answer

This worked for me  input type date   -webkit-inner-spin-button   input type date   -webkit-outer-spin-button      -webkit-appearance  none     margin  0

User · Answer

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

User · Answer

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

[html] Disable native datepicker in Google Chrome

Examples related to html

Examples related to google-chrome

Examples related to datepicker