Wyłącz natywny datepicker w Google Chrome

Odpowiedzi:

140

Aby ukryć strzałkę:

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

Aby ukryć monit:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
Yacine Zalouani
źródło
3
:: - webkit-input-placeholder nie spowoduje ukrycia tekstu „mm / dd / yyyy”, ponieważ nie jest on symbolem zastępczym, jest natywnie kontrolowany.
Justin Bull
1
Brakuje też selektora. Dla porównania: stackoverflow.com/a/11418704/229787
Justin Bull
O ile wiem, to nie działa na Androidzie Chrome - fiddle.jshell.net/RgY3t/138
Seb Charrot
54

Jeśli nadużyłeś <input type="date" />, prawdopodobnie możesz użyć:

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

po załadowaniu, aby przekształcić je w dane wejściowe. Najpierw musisz dołączyć niestandardowy DatePicker:

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

Lub możesz dać im zajęcia:

$('input[type="date"]').addClass('date').attr('type','text');
rjmunro
źródło
5
Z łatwością moje ulubione rozwiązanie. Jest prosta i nie implementuje selektorów CSS specyficznych dla przeglądarki. Zamierzonym rezultatem, IMO, powinno być uniemożliwienie natywnej kontroli, jeśli włączony jest JavaScript, umożliwiając niestandardowy selektor dat. Jeśli jednak JavaScript jest wyłączony, natywne kontrolki nadal działają. Szczerze mówiąc, powinna to być akceptowana odpowiedź.
Justin Bull
2
@ travesty3 Czy te wersje IE obsługują datepickers HTML5, czy po prostu wracają do tekstu? Jeśli nie, to nie ma znaczenia.
rjmunro
2
Nie rozumiem, dlaczego użycie <input type = "date"> dla pola daty jest nadużyciem? (pierwsze zdanie tej odpowiedzi)
Steve
3
Całkowicie poprawne jest, aby nie chcieć selektora dat kalendarza dla pola takiego jak Data urodzenia, ale nadal chcieć, aby pole było weryfikowane przez natywną przeglądarkę.
Duncanmoo
1
@Duncanmoo Co jest specjalnego w datach urodzenia? Po prostu ustaw maksimum na dziś (jeśli chcesz, aby dzieci były wprowadzane w dniu urodzenia) lub N lat temu, gdzie N to minimalny wiek użytkowników Twojej witryny. Szczególnie na urządzeniach mobilnych wolałbym używać natywnego selektora dat w przeglądarce, aby wprowadzić moją datę urodzenia, niż jakiejś niestandardowej rzeczy w JS. Ile jest też niestandardowych implementacji selektora dat JS, które nie obsługują walidacji?
rjmunro
15

Możesz użyć:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
Jimbo
źródło
3
jeśli używasz jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
yorch
Ta odpowiedź nie usuwa natywnego stylu. stackoverflow.com/a/11418704/229787
Justin Bull
4
@JustinBull prawda, ale nie chodziło o usunięcie stylizacji, ale o pozwolenie na użycie selektora dat jQuery, co osiąga ta odpowiedź. Jakieś pomysły na usunięcie stylizacji?
Jimbo,
7

Dzięki Modernizr ( http://modernizr.com/ ) może sprawdzić tę funkcjonalność. Następnie możesz powiązać go z wartością logiczną, którą zwraca:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}
CodeFinity
źródło
3
Jest to bardzo przydatne do powrotu do jQuery datepicker, gdy natywny datepicker nie jest dostępny. Wydaje się jednak, że to pytanie dotyczy pozbycia się selektora dat w Chrome, więc zagłosowałem na twoją odpowiedź.
Sam
7

To zadziałało dla mnie

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
Mantisimo
źródło
2

Powyższy kod nie ustawia wartości elementu wejściowego ani nie uruchamia zdarzenia zmiany. Poniższy kod działa w Chrome i Firefox (nie testowano w innych przeglądarkach):

$('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 to prosta niestandardowa metoda typu String do wypełniania ciągów zerami (wymagane)

MartijnR
źródło
1

Zgadzam się z Robertcem, najlepiej nie używać type = date, ale moja wtyczka JQuery Mobile Datepicker to wykorzystuje. Muszę więc wprowadzić pewne zmiany:

Używam jquery.ui.datepicker.mobile.js i wprowadziłem następujące zmiany:

Od (wiersz 51)

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

do

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

aw formularzu użyj wpisz tekst i dodaj wtyczkę var:

<input type="text" plug="date" name="date" id="date" value="">
ebelendez
źródło
3
Jeśli chcesz dodać atrybuty niestandardowe do danych skryptu lokalnego, prawidłowym sposobem jest użycie data-*atrybutów . W takim przypadku wywołaj swój atrybut data-plugzamiast plug, gwarantuje to, że nigdy nie będzie kolidować z żadnym nowym atrybutem dodanym w HTML6 / 7/8 / itd.
robertc
1

Używam następujących (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()

który jest konwertowany do zwykłego 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
źródło
1

To zadziałało dla mnie:

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

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

Mimo że wartość pól daty nadal istniała i była poprawna, nie była wyświetlana. Dlatego zresetowałem wartości dat z mojego modelu widoku.

Cogitator
źródło
0

To działa dla mnie:

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

Zobacz też:

Jak mogę wyłączyć nowe wprowadzanie daty HTML5 w Chrome?

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

Jeff Tian
źródło
0

Wiem, że to stare pytanie, ale właśnie wylądowałem tutaj, szukając informacji na ten temat, więc ktoś inny też może.

Możesz użyć Modernizr, aby wykryć, czy przeglądarka obsługuje typy danych wejściowych HTML5, takie jak „data”. Jeśli tak, te kontrolki będą używać natywnego zachowania do wyświetlania rzeczy, takich jak datepickers. Jeśli tak się nie stanie, możesz określić, jaki skrypt ma być używany do wyświetlania własnego DatePicker. U mnie dobrze działa!

Dodałem jquery-ui i Modernizr do mojej strony, a następnie dodałem ten kod:

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

Oznacza to, że natywny datepicker jest wyświetlany w Chrome, a jquery-ui w IE.

Philip Stratford
źródło
0

Dla Laravel5 Ponieważ używa się

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

=> Chrome wymusi wybór daty. => jeśli usuniesz to za pomocą css, otrzymasz typowe błędy formatowania !! (Podana wartość nie jest zgodna z wymaganym formatem „rrrr-MM-dd”).

ROZWIĄZANIE:

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

$("#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
źródło