Disattiva il datepicker nativo in Google Chrome

Risposte:

140

Per nascondere la freccia:

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

E per nascondere il prompt:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
— Yacine Zalouani
fonte
3
:: - webkit-input-placeholder non nasconderà il testo "mm / dd / yyyy" perché non è un segnaposto, è controllato in modo nativo.
— Justin Bull
1
Inoltre ti manca un selettore. Per riferimento: stackoverflow.com/a/11418704/229787
— Justin Bull
Per quanto ne so, questo non funziona su Android Chrome - fiddle.jshell.net/RgY3t/138
— Seb Charrot
54

Se hai fatto un uso improprio <input type="date" />, probabilmente puoi usare:

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

dopo che sono stati caricati per trasformarli in input di testo. Dovrai prima allegare il tuo datepicker personalizzato:

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

Oppure potresti dare loro una lezione:

$('input[type="date"]').addClass('date').attr('type','text');
— rjmunro
fonte
5
Facilmente la mia soluzione preferita. È semplice e non implementa selettori CSS specifici del browser. Il risultato previsto, IMO, dovrebbe essere quello di impedire il controllo nativo se JavaScript è abilitato, consentendo un selettore di date personalizzato. Tuttavia, se JavaScript è disabilitato, i controlli nativi continuano a funzionare. Onestamente, questa dovrebbe essere la risposta accettata.
— Justin Bull
2
@ travesty3 queste versioni di IE supportano i datepicker html5 o semplicemente ripiegano sul testo? In caso contrario, non importa.
— rjmunro
2
Non capisco perché l'utilizzo di <input type = "date"> per un campo data ne fa un uso improprio? (prima frase di questa risposta)
— Steve
3
È perfettamente valido non volere un selettore di date del calendario per un campo come Data di nascita, ma volere comunque che il campo venga convalidato dal browser nativo.
— Duncanmoo
1
@Duncanmoo Cosa hanno di speciale le date di nascita? Basta impostare il massimo su oggi (se vuoi consentire ai bambini di essere inseriti il ​​giorno in cui nascono), o N anni fa, dove N è l'età minima per gli utenti del tuo sito. Soprattutto sui dispositivi mobili, preferisco utilizzare il selettore di date nativo del browser per inserire la mia data di nascita piuttosto che qualcosa di JS personalizzato. Inoltre, quante implementazioni del selettore di date JS personalizzate esistono che non supportano la convalida?
— rjmunro
15

Potresti usare:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
— Jimbo
fonte
3
se usi jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
— yorch
Questa risposta non rimuove lo stile nativo. stackoverflow.com/a/11418704/229787
— Justin Bull
4
@JustinBull true, ma la domanda non riguardava la rimozione dello stile, ma consentire l'utilizzo del selettore di date jQuery al posto di questa risposta. Qualche idea su come rimuovere anche lo styling?
— Jimbo
7

Con Modernizr ( http://modernizr.com/ ), può verificare tale funzionalità. Quindi puoi legarlo al booleano che restituisce:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}
— CodeFinity
fonte
3
Questo è molto utile per tornare a jQuery datepicker quando un datepicker nativo non è disponibile. Tuttavia, questa domanda sembra riguardare l'eliminazione del selettore di date di Chrome, quindi ho votato la tua risposta.
— Sam
7

Questo ha funzionato per me

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

Il codice precedente non imposta il valore dell'elemento di input né attiva un evento di modifica. Il codice seguente funziona in Chrome e Firefox (non testato in altri browser):

$('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 è un semplice metodo String personalizzato per riempire le stringhe con zeri (obbligatorio)

— MartijnR
fonte
1

Sono d'accordo con Robertc, il modo migliore è non usare type = date ma il mio plugin JQuery Mobile Datepicker lo usa. Quindi devo apportare alcune modifiche:

Sto usando jquery.ui.datepicker.mobile.js e ho apportato queste modifiche:

Da (linea 51)

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

per

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

e nel modulo usa, digita il testo e aggiungi il var plug:

<input type="text" plug="date" name="date" id="date" value="">
— ebelendez
fonte
3
Se si desidera aggiungere attributi personalizzati per i dati di script locali, il modo valido è utilizzare gli data-*attributi . In questo caso, chiama il tuo attributo data-pluginvece di plug, è quindi garantito che non entrerà mai in conflitto con nessun nuovo attributo aggiunto in HTML6 / 7/8 / ecc.
— robertc
1

Uso il seguente (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()

che viene convertito in semplice 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);
— Paolo Dona
fonte
1

Questo ha funzionato per 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()');

Anche se il valore dei campi della data era ancora presente e corretto, non veniva visualizzato. Ecco perché ho ripristinato i valori della data dal mio modello di visualizzazione.

— Cogitator
fonte
0

Questo funziona per 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);

Guarda anche:

Come posso disabilitare il nuovo input di data HTML5 di Chrome?

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

— Jeff Tian
fonte
0

So che questa è una vecchia domanda ora, ma sono appena atterrato alla ricerca di informazioni su questo, quindi potrebbe farlo anche qualcun altro.

Puoi utilizzare Modernizr per rilevare se il browser supporta i tipi di input HTML5, come "data". Se lo fa, quei controlli useranno il comportamento nativo per visualizzare cose come datepicker. In caso contrario, puoi specificare quale script deve essere utilizzato per visualizzare il tuo datepicker. Funziona bene per me!

Ho aggiunto jquery-ui e Modernizr alla mia pagina, quindi ho aggiunto questo codice:

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

Ciò significa che il datepicker nativo viene visualizzato in Chrome e quello jquery-ui viene visualizzato in IE.

— Philip Stratford
fonte
0

Per Laravel5 Dal momento che si usa

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

=> Chrome forza il suo datepicker. => se lo togli con css otterrai i soliti errori di formattazione !! (Il valore specificato non è conforme al formato richiesto, "yyyy-MM-dd".)

SOLUZIONE:

$ ('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
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.