ปิดการใช้งาน datepicker ดั้งเดิมใน Google Chrome

เครื่องมือเลือกวันที่ลงจอดบน Chrome 20 มีแอตทริบิวต์ใดที่จะปิดใช้งานหรือไม่ ระบบทั้งหมดของฉันใช้ jQuery UI datepicker และเป็น crossbrowser ดังนั้นฉันต้องการปิดการใช้งาน datepicker ดั้งเดิมของ Chrome มีแอตทริบิวต์แท็กหรือไม่

ในการซ่อนลูกศร:

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

และเพื่อซ่อนพรอมต์:

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

หากคุณใช้ในทางที่ผิด<input type="date" />คุณสามารถใช้:

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

หลังจากโหลดแล้วเพื่อเปลี่ยนเป็นอินพุตข้อความ คุณจะต้องแนบ datepicker ที่กำหนดเองของคุณก่อน:

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

หรือคุณสามารถให้ชั้นเรียน:

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

คุณสามารถใช้:

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

ด้วย Modernizr ( http://modernizr.com/ ) จะสามารถตรวจสอบฟังก์ชันการทำงานนั้นได้ จากนั้นคุณสามารถผูกมันเข้ากับบูลีนที่มันส่งกลับ:

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

สิ่งนี้ได้ผลสำหรับฉัน

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

โค้ดด้านบนไม่ได้กำหนดค่าขององค์ประกอบอินพุตและไม่ทำให้เกิดเหตุการณ์การเปลี่ยนแปลง โค้ดด้านล่างใช้งานได้ใน Chrome และ Firefox (ไม่ได้ทดสอบในเบราว์เซอร์อื่น):

$('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 เป็นวิธีการสตริงที่กำหนดเองอย่างง่ายเพื่อวางสตริงด้วยศูนย์ (จำเป็น)

ฉันเห็นด้วยกับ Robertc วิธีที่ดีที่สุดคือไม่ใช้ type = date แต่ปลั๊กอิน JQuery Mobile Datepicker ของฉันใช้มัน ดังนั้นฉันต้องทำการเปลี่ยนแปลงบางอย่าง:

ฉันใช้ jquery.ui.datepicker.mobile.js และทำการเปลี่ยนแปลงนี้:

จาก (บรรทัดที่ 51)

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

ถึง

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

และในการใช้แบบฟอร์มพิมพ์ข้อความและเพิ่มปลั๊ก var:

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

ฉันใช้สิ่งต่อไปนี้ (กาแฟ):

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

ซึ่งจะถูกแปลงเป็น 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);

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

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

แม้ว่าค่าของช่องวันที่ยังคงอยู่และถูกต้อง แต่ก็ไม่ได้แสดง นั่นเป็นเหตุผลที่ฉันรีเซ็ตค่าวันที่จากโมเดลมุมมองของฉัน

สิ่งนี้ใช้ได้กับฉัน:

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

ดูสิ่งนี้ด้วย:

ฉันจะปิดใช้งานการป้อนวันที่ของ Chrome HTML5 ใหม่ได้อย่างไร

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

ตอนนี้ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันเพิ่งมาที่นี่เพื่อหาข้อมูลเกี่ยวกับเรื่องนี้เพื่อให้ใคร ๆ

คุณสามารถใช้Modernizrเพื่อตรวจสอบว่าเบราว์เซอร์รองรับประเภทอินพุต HTML5 หรือไม่เช่น "วันที่" หากเป็นเช่นนั้นการควบคุมเหล่านั้นจะใช้พฤติกรรมดั้งเดิมเพื่อแสดงสิ่งต่างๆเช่น datepickers หากไม่เป็นเช่นนั้นคุณสามารถระบุได้ว่าควรใช้สคริปต์ใดเพื่อแสดง datepicker ของคุณเอง ใช้ได้ดีกับฉัน!

ฉันเพิ่มjquery-uiและ 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>

ซึ่งหมายความว่า datepicker ดั้งเดิมจะแสดงใน Chrome และ jquery-ui หนึ่งจะแสดงใน IE

สำหรับ Laravel5 เนื่องจากใช้งานครั้งเดียว

{!! แบบฟอร์ม :: input ('date', 'date_start', null, ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}

=> Chrome จะบังคับให้ datepicker => หากคุณนำมันออกไปด้วย css คุณจะได้รับข้อผิดพลาดในการจัดรูปแบบตามปกติ !! (ค่าที่ระบุไม่เป็นไปตามรูปแบบที่ต้องการ "yyyy-MM-dd")

วิธีการแก้:

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