Google 크롬에서 기본 날짜 선택기 비활성화

날짜 선택기가 Chrome 20에 착륙했습니다. 비활성화 할 수있는 속성이 있습니까? 내 전체 시스템은 jQuery UI datepicker를 사용하고 크로스 브라우저이므로 Chrome 기본 datepicker를 비활성화하고 싶습니다. 태그 속성이 있습니까?

화살표를 숨기려면 :

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

로드 한 후 텍스트 입력으로 전환합니다. 먼저 사용자 지정 날짜 선택기를 첨부해야합니다.

$('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는 0으로 문자열을 채우는 간단한 사용자 지정 문자열 메서드입니다 (필수).

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

다음 (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()

일반 자바 스크립트로 변환됩니다.

(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 입력 유형을 지원하는지 여부를 감지 할 수 있습니다 . 그렇다면 해당 컨트롤은 기본 동작을 사용하여 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은 날짜 선택기를 강제합니다. => 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');