날짜 선택기 달력 값을 어떻게 재설정합니까? .. 최소 및 최대 날짜 제한?

문제는 텍스트 상자 값을 삭제하여 날짜를 지울 때 이전 날짜 제한이 여전히 적용된다는 것입니다.

나는 문서 를 정리해 왔으며 해결책으로 튀어 나온 것은 없습니다. 또한 SO / Google 검색에서 빠른 수정을 찾을 수 없었습니다.

http://jsfiddle.net/CoryDanielson/tF5MH/

해결책:

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate ()는 DatePicker 개체의 개인 메서드입니다. jQuery UI 웹 사이트의 공용 API에서는 찾을 수 없지만 매력적으로 작동합니다.

사용자가 입력 한 필터를 제거 할 수 있도록 datepicker를 비우는 것입니다. 인터넷 검색을 통해이 달콤한 코드를 찾았습니다.

읽기 전용 필드에서도 지우기 기능을 추가 할 수 있습니다. datepicker에 다음 코드를 추가하기 만하면됩니다.

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

사람들은 강조 표시 (읽기 전용 필드 포함) 한 다음 백 스페이스 또는 삭제 키를 사용하여 _clearDate기능을 사용하여 날짜를 제거 할 수 있습니다.

출처

시도해 보았 니:

$('selector').datepicker('setDate', null);

API 문서 에 따라 작동 합니다.

옵션을 다시 null로 설정하면됩니다.

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

jsfiddle을 변경했습니다 : http://jsfiddle.net/tF5MH/9/

$('.date').datepicker('setDate', null);

삭제 코드를 다음과 같이 변경해보십시오.

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

이것을 시도하면 날짜를 지우는 Jquery Calender에 지우기 버튼이 추가됩니다.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});

지우기를 클릭하면 datepicker에서 최대 날짜 속성을 재설정합니다.

jquery 웹 사이트에서

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

너무 늦었다는 것을 알고 있지만 여기에 나를 위해 한 간단한 코드가 있습니다.

$('#datepicker-input').val('').datepicker("refresh");

분명한 대답은 저에게 효과적이었습니다.

$('#datepicker').val('');

여기서 $ ( '# datepicker')는 입력 요소의 ID입니다.

Leniel Macaferi 솔루션의 수정 된 버전은 텍스트 필드에 포커스가 없을 때 IE8에서 백 스페이스 키가 "페이지 뒤로"바로 가기 (날짜 선택기가 열려있는 경우로 표시됨)를 설명하는 것입니다.

그것은 또한 나를 위해 작동하지 않았기 val()때문에 필드를 지우는 데 사용 합니다 _clearDate(this).

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});

내 datepicker 초기화는 다음과 같습니다.

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

따라서 기본 '완료' 버튼에는 '지우기' 텍스트가 있습니다.

이제 datepicker.js 내에서 내부 함수 '_attachHandlers'를 찾습니다.

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

그리고 숨기기 기능을 다음과 같이 변경하십시오 .

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

이 코드를 사용하여 필드와 모든 헛소리를 지 웁니다. 사용 사례에 빈 필드가 필요했습니다.

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

어떤 이유로 .val('')나를 위해 작동하지 않을 것입니다. 그러나 jQuery를 우회하면 해냈습니다. 제 생각에는 .datepicker ( 'clear') 옵션이 없다는 결함입니다.

이 문제를 해결하는 방법

ui.js에서 var 'controls'변경

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

그런 다음 clearText var를 추가하십시오.

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

그리고 쇼 기능 전

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);

$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });

Firefox에서는 기본적으로 datepicker 컨트롤이 비활성화되어있는 형식 (프로그래밍 방식)으로 작업을 수행합니다.

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state

이 솔루션을 시도하십시오 내가 시도한대로 제대로 작동합니다

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');