Desativar selecionador de data nativo no Google Chrome

Respostas:

140

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;
}
— Yacine Zalouani
fonte
3
:: - webkit-input-placeholder não ocultará o texto "mm / dd / aaaa" porque não é um placeholder, ele é controlado nativamente.
— Justin Bull
1
Além disso, está faltando um seletor. Para referência: stackoverflow.com/a/11418704/229787
— Justin Bull
Pelo que eu posso dizer, isso não funciona no Android Chrome - fiddle.jshell.net/RgY3t/138
— Seb Charrot
54

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');
— rjmunro
fonte
5
Facilmente minha solução favorita. É simples e não implementa seletores CSS específicos do navegador. O resultado pretendido, IMO, deve ser evitar o controle nativo se o JavaScript estiver ativado, permitindo um selecionador de data personalizado. No entanto, se o JavaScript estiver desabilitado, os controles nativos ainda funcionarão. Honestamente, essa deve ser a resposta aceita.
— Justin Bull
2
@ travesty3 essas versões do IE suportam selecionadores de data html5 ou apenas retornam ao texto? Se não, não importa.
— rjmunro 01 de
2
Não entendo por que usar <input type = "date"> para um campo de data é um uso indevido? (primeira frase desta resposta)
— Steve
3
É perfeitamente válido não querer um selecionador de data do calendário para um campo como Data de Nascimento, mas ainda querer o campo validado pelo navegador nativo.
— Duncanmoo
1
@Duncanmoo O que há de especial nas datas de nascimento? Basta definir o máximo como hoje (se quiser permitir que os bebês sejam inscritos no dia em que nasceram) ou N anos atrás, onde N é a idade mínima para usuários do seu site. Especialmente no celular, prefiro usar o seletor de data nativo do navegador para inserir minha data de nascimento do que algo JS personalizado. Além disso, quantas implementações de selecionador de data JS personalizado existem que não oferecem suporte à validação?
— rjmunro
15

Você pode usar:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
— Jimbo
fonte
3
se você usar jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
— yorch
Esta resposta não remove o estilo nativo. stackoverflow.com/a/11418704/229787
— Justin Bull
4
@JustinBull true, mas a questão não era sobre remover o estilo, mas permitir que o seletor de data jQuery seja usado em vez disso, o que esta resposta atinge. Alguma ideia de como o estilo pode ser removido também?
— Jimbo
7

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();
}
— CodeFinity
fonte
3
Isso é muito útil para recorrer ao jQuery datepicker quando um datepicker nativo não estiver disponível. No entanto, esta questão parece ser sobre como se livrar do selecionador de data do Chrome, então votei sua resposta para baixo.
— Sam,
7

Isso funcionou para mim

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

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)

— MartijnR
fonte
1

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="">
— Ebelendez
fonte
3
Se você deseja adicionar atributos personalizados para dados de script local, a maneira válida é usar data-*atributos . Nesse caso, chame seu atributo em data-plugvez de plug, então é garantido que ele nunca entrará em conflito com qualquer novo atributo adicionado em HTML6 / 7/8 / etc.
— robertc
1

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);
— Paolo Dona
fonte
1

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.

— Cogitador
fonte
0

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

— Jeff Tian
fonte
0

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.

— Philip Stratford
fonte
0

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');
— Mathieu Dierckx
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.