Selektor dat wylądował w Chrome 20, czy jest jakiś atrybut, aby go wyłączyć? Cały mój system używa datepicker jQuery UI i jest to crossbrowser, więc chcę wyłączyć natywny datepicker Chrome. Czy istnieje atrybut tagu?
html
google-chrome
datepicker
Alexandre
źródło
źródło
Odpowiedzi:
Aby ukryć strzałkę:
input::-webkit-calendar-picker-indicator{ display: none; }
Aby ukryć monit:
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
źródło
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');
źródło
Możesz użyć:
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
źródło
jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
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(); }
źródło
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; }
źródło
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)
źródło
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="">
źródło
data-*
atrybutów . W takim przypadku wywołaj swój atrybutdata-plug
zamiastplug
, gwarantuje to, że nigdy nie będzie kolidować z żadnym nowym atrybutem dodanym w HTML6 / 7/8 / itd.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);
źródło
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.
źródło
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
źródło
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.
źródło
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');
źródło