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

Program / 글쓴이

날짜 선택기가 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="">