Desativar selecionador de data nativo no Google Chrome

O seletor de data caiu no Chrome 20, há algum atributo para desativá-lo? Todo o meu sistema usa o jQuery UI datepicker e é um crossbrowser, então, quero desabilitar o datepicker nativo do Chrome. Existe algum atributo de tag?

Para esconder a seta:

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

E para ocultar o prompt:

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

Se você usou indevidamente, <input type="date" />provavelmente pode usar:

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

depois de carregados para transformá-los em entradas de texto. Você precisará anexar seu selecionador de data personalizado primeiro:

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

Ou você pode dar-lhes uma aula:

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

Você pode usar:

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

Com o Modernizr ( http://modernizr.com/ ), ele pode verificar essa funcionalidade. Em seguida, você pode vinculá-lo ao booleano que ele retorna:

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

Isso funcionou para mim

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

O código acima não define o valor do elemento de entrada nem dispara um evento de alteração. O código abaixo funciona no Chrome e Firefox (não testado em outros navegadores):

$('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 é um método simples de String personalizado para preencher strings com zeros (obrigatório)

Eu concordo com Robertc, a melhor maneira não é usar type = date, mas meu plugin JQuery Mobile Datepicker usa. Portanto, tenho que fazer algumas mudanças:

Estou usando jquery.ui.datepicker.mobile.js e fiz estas alterações:

De (linha 51)

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

para

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

e no formulário use, digite o texto e adicione o plug var:

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

Eu uso o seguinte (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()

que é convertido para javascript simples:

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

Isso funcionou para mim:

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

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

Embora o valor dos campos de data ainda estivesse lá e correto, ele não foi exibido. É por isso que redefino os valores de data do meu modelo de visualização.

Isso funciona para mim:

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

Veja também:

Como posso desativar a nova entrada de data do Chrome HTML5?

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

Eu sei que esta é uma pergunta antiga agora, mas acabei de chegar aqui procurando informações sobre isso para que outra pessoa também possa.

Você pode usar o Modernizr para detectar se o navegador oferece suporte a tipos de entrada HTML5, como 'data'. Em caso afirmativo, esses controles usarão o comportamento nativo para exibir coisas como selecionadores de data. Caso contrário, você pode especificar qual script deve ser usado para exibir seu próprio selecionador de data. Funciona bem para mim!

Eu adicionei jquery-ui e Modernizr à minha página, em seguida, acrescentou este código:

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

Isso significa que o selecionador de data nativo é exibido no Chrome e o jquery-ui é exibido no IE.

Para Laravel5 Uma vez que se usa

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

=> Chrome forçará seu selecionador de data. => se você removê-lo com css você obterá os erros de formatação usuais !! (O valor especificado não está de acordo com o formato exigido, "aaaa-MM-dd".)

SOLUÇÃO:

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