programing

j과거 날짜를 방지하기 위한 날짜 선택기 쿼리

jooyons 2023. 9. 17. 13:03
반응형

j과거 날짜를 방지하기 위한 날짜 선택기 쿼리

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>

문제는 이전 날짜 선택을 제한하는 방법을 잘 모르겠다는 것입니다.

한 줄에 여러 개의 속성을 넣었는지 확인합니다(코드를 한 줄만 보여주었으므로 저와 같은 문제가 발생했을 수 있습니다).

내 것은 기본 날짜를 설정하지만, 오래된 날짜를 회색으로 표시하지 않았습니다.이것은 작동하지 않습니다.

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

이를 통해 다음을 모두 수행할 수 있습니다.

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

1과 +1은 동일하게 작동합니다(또는 0과 +0의 경우).

나: Windows 7 x 64, 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"); 
         }

이거 먹어봐요.실수가 있으면 수정해주세요 :) 감사합니다.

이 방법이 효과가 있을 것입니다.<input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});

설정해보기startDate현재에 이르기까지예를 들어,

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

min 속성을 사용했습니다.min="' + (new Date()).toISOString().substring(0,10) + '"

여기 내 코드가 있고 작동했습니다.

<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

반응형