Development Tip

과거 날짜를 방지하는 jQuery datepicker

yourdevel 2020. 10. 17. 12:29
반응형

과거 날짜를 방지하는 jQuery datepicker


jQuery datepicker에서 과거 날짜를 어떻게 비활성화합니까? 옵션을 찾았지만 과거 날짜를 비활성화하는 기능을 나타내는 아무것도 찾지 못하는 것 같습니다.

업데이트 : 빠른 응답에 감사드립니다. 나는 운없이 그것을 시도했다. 요일은 여전히 ​​내가 예상 한대로 회색으로 표시되지 않았으며 선택한 과거 날짜를 여전히 수락합니다.

나는 이것을 시도했다 :

$('#datepicker').datepicker({ minDate: '0' });

작동하지 않습니다.

나는 이것을 시도했다 :

$('#datepicker').datepicker({ minDate: new Date() });

여전히 작동하지 않습니다.

캘린더 위젯을 잘 표시합니다. 회색으로 표시되거나 지난 날의 입력을 방지하지 않습니다. 나는 운이 없었던 과거에 minDate와 maxDate를 시도했기 때문에 그것들이 아니어야한다고 생각했습니다.


이 시도:

$("#datepicker").datepicker({ minDate: 0 });

에서 따옴표를 제거하십시오 0.


최소 날짜를 지정하기 만하면됩니다. 0으로 설정하면 최소 날짜가 오늘부터 0 일, 즉 오늘이됩니다. '0d'대신 문자열을 전달할 수 있습니다 (기본 단위는 일).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});

이전에 바인딩 된 날짜 선택기를 다루는 경우

$("#datepicker").datepicker({ minDate: 0 });

작동 안 할 것이다. 이 구문은 위젯을 생성 할 때만 적용됩니다.

바운드 날짜 선택기의 최소 날짜를 설정하려면 다음을 사용하십시오.

$("#datePicker").datepicker("option", "minDate", 0);

주변의 따옴표를 제거하면 0작동합니다.

작업 코드 스 니펫 :

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });
body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />


minDate 옵션을 사용하여 가능한 최소 날짜를 설정하십시오. http://jqueryui.com/demos/datepicker/#option-minDate


마음에 0을 주면 지난 날짜가 사라질 것입니다.

$( "#datepicker" ).datepicker({ minDate: 0});

라이브 예

여기에서 더 많은 것을 읽으십시오


이것은 작동합니다 :

$("#datepicker").datepicker({ minDate: +0 });

// 미래 날짜 비활성화

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        }); 

// 이전 날짜 비활성화

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });

$("#datePicker").datePicker({startDate: new Date() });. 이것은 나를 위해 작동합니다


다음 코드를 사용하여 날짜 형식을 지정하고 달력에 2 개월을 표시합니다.

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

The problem is I am not sure how to restrict previous dates selection.


Make sure you put multiple properties in the same line (since you only showed 1 line of code, you may have had the same problem I did).

Mine would set the default date, but didn't gray out old dates. This doesn't work:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

This does both:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 and +1 work the same (or 0 and +0 in your case).

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3


var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

Try this. If any mistake, please correct me :) Thanks all.


Try setting startDate to the current date. For example:

$('.date-pick').datePicker({startDate:'01/01/1996'});

I used the min attribute: min="' + (new Date()).toISOString().substring(0,10) + '"

Here's my code and it worked.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

enter image description here

참고URL : https://stackoverflow.com/questions/1786411/jquery-datepicker-to-prevent-past-date

반응형