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

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

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

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

아이디어 1:

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

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

HTML 코드는 다음과 같습니다

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

Js 코드는 다음과 같습니다

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

Js 코드는 다음과 같습니다

코드 복사

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

HTML 코드는 다음과 같습니다

코드 복사

코드 복사

Js 코드는 다음과 같습니다

코드 복사

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