jQuery ui는 datepicker 플러그인을 사용하여 시작 날짜(minDate)와 종료 날짜(maxDate)_jquery를 구현합니다.

jQuery ui를 사용하려면 먼저 jQuery 클래스 라이브러리, jQuery ui js 스크립트, jQuery ui css 스타일시트를 소개해야 합니다. 코드 예시는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;link rel ="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

참고: js 스크립트를 도입할 때 먼저 jQuery 클래스 라이브러리를 도입한 다음 jQuery ui 스크립트를 도입해야 합니다

다음은 두 가지 구현 단계입니다.

아이디어 1:

첫 번째 단계는 두 개의 datepicker 구성요소를 구현하는 것입니다.

두 개의 입력 태그를 정의하고, 텍스트를 입력하고, id 속성을 지정해야 합니다.

HTML 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

시작 날짜:
종료일:

js 코드에 있는 두 입력 요소의 jQuery 객체를 가져와서 날짜 선택기 구성 요소로 변환합니다

Js 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ){
                                                                                                                        
위 작업을 구현한 후 페이지의 텍스트 상자를 클릭하면 날짜 선택기가 나타나면 성공한 것입니다.

2단계 시작일과 종료일 설정

시작 날짜 값을 선택한 경우 종료 날짜의 최소값은 시작 날짜여야 하며 마찬가지로 종료 날짜를 선택한 경우 시작 날짜의 최대 값은 종료 날짜여야 합니다. datepicker의 onSelect 속성을 사용하여 지정된 날짜가 선택될 때 트리거되는 이벤트를 설정하고 이 이벤트를 사용하여 해당 datepicker 최소 날짜 또는 최대 날짜를 지정할 수 있습니다.

Js 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.$("#start").datepicker ({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText);

}

});
$( "#end").datepicker({
onSelect:function(dateText,inst){
$("#start").datepicker("option","maxDate",dateText);
}
});



참고: 익명 함수의 dateText 속성은 현재 선택한 날짜의 문자열입니다

아이디어 2:

첫 번째 단계는 두 개의 텍스트 상자 개체를 동시에 가져와서 날짜 선택기로 변환하는 것입니다(jQuery의 선택기 사용)

HTML 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.시작 날짜: 종료일:

Js 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.vardates = $("#start, #end" );dates.datepicker();

두 번째 단계: 또한 날짜를 선택한 후 onSelect 이벤트를 트리거하고 selectedDate 매개변수를 전달하는 함수를 호출합니다.

함수 본문에서 먼저 트리거 이벤트가 시작 날짜인지 종료 날짜인지 확인합니다. 이 판단을 사용하여 minDate 또는 maxDate를 지정하고 설정한 다음 not() 함수를 사용하여 다른 날짜 선택기 개체를 역으로 선택하고 해당 개체를 설정합니다. 해당 속성.

Js 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.dates.datepicker({ onSelect : function( selectedDate){ var option = this.id == "start" ? "minDate" : "maxDate";

dates.not(this).datepicker("option", option, selectedDate);

}
});

이렇게 하면 한 파티를 설정한 후에는 다른 파티가 제한됩니다.

얻은 효과는 아래와 같습니다.