Nonaktifkan pemilih data asli di Google Chrome

Alat pilih tanggal mendarat di Chrome 20, apakah ada atribut untuk menonaktifkannya? Seluruh sistem saya menggunakan jQuery UI datepicker dan itu crossbrowser, jadi, saya ingin menonaktifkan datepicker asli Chrome. Apakah ada atribut tag?

Untuk menyembunyikan panah:

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

Dan untuk menyembunyikan prompt:

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

Jika Anda telah menyalahgunakan <input type="date" />Anda mungkin dapat menggunakan:

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

setelah dimuat untuk mengubahnya menjadi input teks. Anda harus melampirkan pemilih data khusus Anda terlebih dahulu:

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

Atau Anda bisa memberi mereka kelas:

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

Anda bisa menggunakan:

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

Dengan Modernizr ( http://modernizr.com/ ), itu dapat memeriksa fungsionalitas itu. Kemudian Anda dapat mengikatnya ke boolean yang dikembalikannya:

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

Ini berhasil untuk saya

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

Kode di atas tidak menyetel nilai elemen input juga tidak mengaktifkan peristiwa perubahan. Kode di bawah ini berfungsi di Chrome dan Firefox (tidak diuji di browser lain):

$('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 adalah metode String kustom sederhana untuk mengisi string dengan nol (wajib)

Saya setuju dengan Robertc, cara terbaik adalah tidak menggunakan type = date tetapi plugin JQuery Mobile Datepicker saya menggunakannya. Jadi saya harus membuat beberapa perubahan:

Saya menggunakan jquery.ui.datepicker.mobile.js dan melakukan perubahan ini:

Dari (baris 51)

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

untuk

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

dan dalam bentuk gunakan, ketik teks dan tambahkan steker var:

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

Saya menggunakan (coffeescript) berikut:

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

yang diubah menjadi javascript biasa:

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

Ini berhasil untuk saya:

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

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

Meskipun nilai bidang tanggal masih ada dan benar, itu tidak ditampilkan. Itulah mengapa saya mengatur ulang nilai tanggal dari model tampilan saya.

Ini bekerja untuk saya:

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

Lihat juga:

Bagaimana cara menonaktifkan input tanggal HTML5 Chrome baru?

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

Saya tahu ini adalah pertanyaan lama sekarang, tetapi saya baru saja mendarat di sini untuk mencari informasi tentang ini sehingga orang lain mungkin juga.

Anda dapat menggunakan Modernizr untuk mendeteksi apakah browser mendukung jenis input HTML5, seperti 'tanggal'. Jika ya, kontrol tersebut akan menggunakan perilaku asli untuk menampilkan hal-hal seperti datepickers. Jika tidak, Anda dapat menentukan skrip apa yang harus digunakan untuk menampilkan datepicker Anda sendiri. Bekerja dengan baik untuk saya!

Saya menambahkan jquery-ui dan Modernizr ke halaman saya, lalu menambahkan kode ini:

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

Ini berarti bahwa datepicker asli ditampilkan di Chrome, dan jquery-ui ditampilkan di IE.

Untuk Laravel5 Sejak seseorang menggunakan

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

=> Chrome akan memaksa datepicker-nya. => jika Anda menghapusnya dengan css Anda akan mendapatkan kesalahan format seperti biasa !! (Nilai yang ditentukan tidak sesuai dengan format yang diminta, "yyyy-MM-dd".)

LARUTAN:

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