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

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

---

나는 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);

---

이것은 나를 위해 작동합니다.

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

---

나는 이것이 지금 오래된 질문이라는 것을 알고 있지만, 이것에 대한 정보를 찾기 위해 여기에 왔으므로 다른 사람도 마찬가지입니다.

You can use Modernizr to detect whether the browser supports HTML5 input types, like 'date'. If it does, those controls will use the native behaviour to display things like datepickers. If it doesn't, you can specify what script should be used to display your own datepicker. Works well for me!

I added jquery-ui and Modernizr to my page, then added this code:

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

This means that the native datepicker is displayed in Chrome, and the jquery-ui one is displayed in IE.

---

For Laravel5 Since one uses

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

=> Chrome will force its datepicker. => if you take it away with css you will get the usual formatting errors!! (The specified value does not conform to the required format, "yyyy-MM-dd".)

SOLUTION:

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

참고URL : https://stackoverflow.com/questions/11320615/disable-native-datepicker-in-google-chrome