Google Chrome'da yerel veri seçiciyi devre dışı bırakın

Tarih seçici Chrome 20'ye indi, onu devre dışı bırakacak herhangi bir özellik var mı? Tüm sistemim jQuery UI datepicker kullanıyor ve bu çapraz tarayıcı, bu yüzden Chrome native datepicker'ı devre dışı bırakmak istiyorum. Herhangi bir etiket özelliği var mı?

Oku gizlemek için:

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

Ve istemi gizlemek için:

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

Kötüye kullandıysanız <input type="date" />, muhtemelen kullanabilirsiniz:

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

onları metin girişlerine dönüştürmek için yükledikten sonra. Önce özel tarih seçicinizi eklemeniz gerekir:

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

Veya onlara bir ders verebilirsiniz:

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

Kullanabilirsin:

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

Modernizr ( http://modernizr.com/ ) ile bu işlevselliği kontrol edebilir. Sonra onu döndürdüğü boolean ile bağlayabilirsiniz:

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

Bu benim için çalıştı

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

Yukarıdaki kod, giriş öğesinin değerini ayarlamaz veya bir değişiklik olayını tetiklemez. Aşağıdaki kod, Chrome ve Firefox'ta çalışır (diğer tarayıcılarda test edilmemiştir):

$('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, dizeleri sıfırlarla doldurmak için basit bir özel String yöntemidir (gerekli)

Robertc'e katılıyorum, en iyi yol type = date kullanmamaktır, ancak JQuery Mobile Datepicker eklentim bunu kullanıyor. Bu yüzden bazı değişiklikler yapmam gerekiyor:

Jquery.ui.datepicker.mobile.js kullanıyorum ve şu değişiklikleri yaptım:

Gönderen (satır 51)

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

-e

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

ve kullanım formunda, metni yazın ve var eklentisini ekleyin:

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

Aşağıdakileri kullanıyorum (coffeeescript):

$ ->
  # disable chrome's html5 datepicker
  for datefield in $('input[data-datepicker=true]')
    $(datefield).attr('type', 'text')
  # enable custom datepicker
  $('input[data-datepicker=true]').datepicker()

düz javascript'e dönüştürülür:

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

Bu benim için çalıştı:

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

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

Olsa değer tarihi alanların hala orada ve doğru, bu görüntü vermedi. Bu yüzden tarih değerlerini görünüm modelimden sıfırladım.

Bu benim için çalışıyor:

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

Ayrıca bakınız:

Yeni Chrome HTML5 tarih girişini nasıl devre dışı bırakabilirim?

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

Bunun artık eski bir soru olduğunu biliyorum, ama buraya bu konu hakkında bilgi aramak için geldim, böylece başka biri de olabilir.

Tarayıcının 'tarih' gibi HTML5 giriş türlerini destekleyip desteklemediğini tespit etmek için Modernizr'i kullanabilirsiniz . Varsa, bu kontroller veri seçici gibi şeyleri görüntülemek için yerel davranışı kullanır. Aksi takdirde, kendi tarih seçicinizi görüntülemek için hangi komut dosyasının kullanılması gerektiğini belirtebilirsiniz. Benim için iyi çalışıyor!

Eklediğim jquery-ui sonra bu kodu eklenmiş benim sayfasına ve Modernizr:

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

Bu, yerel veri seçicinin Chrome'da ve jquery-ui'nin IE'de görüntülendiği anlamına gelir.

Laravel5 için Biri kullandığından beri

{!! Form :: input ('tarih', 'tarih_başlangıç', null, ['sınıf' => 'form-kontrol', 'id' => 'tarih_başlangıç', 'ad' => 'tarih_başlangıç']) !!}

=> Chrome, tarih seçicisini zorlayacaktır. => css ile alırsanız, normal biçimlendirme hatalarını alırsınız !! (Belirtilen değer gerekli biçime, "yyyy-MM-gg" ile uyumlu değil.)

ÇÖZÜM:

$ ('input [tür = "tarih"]'). attr ('tür', 'metin');

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