Bootstrap의 DatePicker 속성을 사용하여 날짜 범위를 선택하는 방법

이번에는 Bootstrap의 DatePicker 속성에 대한 날짜 범위를 선택하는 방법과 Bootstrap의 DatePicker 속성에 대한 날짜 범위를 선택할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다. 바라보다.

날짜 플러그인을 사용하다 보면 필요한 경우가 종종 있습니다. 두 개의 입력 상자 선택. 시작 시간은 종료 시간보다 작고, 종료 시간은 시작 시간보다 크며, 시작 시간과 종료 시간은 현재 시간보다 크지 않습니다.

물론 선택 결과를 사용하여 입력이 올바른지 여부를 판단할 수 있습니다. 그러나 더 나은 접근 방식은 날짜 선택기에 몇 가지 제한 사항을 추가하는 것입니다.

Bootstrap에는 뛰어난 날짜 선택 플러그인이 탑재되어 있습니다. DatePicker 및 DateTimePicker.

둘의 기능은 매우 유사합니다. 사용방법도 비슷합니다. DatePicker는 더 많은 이벤트와 설정을 지원합니다.

API를 보면 날짜가 변경되면 ChangeDate 이벤트가 있다는 것을 알 수 있습니다. 선택한 날짜가 변경되면 이 이벤트에 제공한 콜백이 호출됩니다. 그런데 아쉽게도 입력란에 날짜를 직접 입력하거나 삭제하는 경우에는 이 이벤트가 발생하지 않는 것 같습니다. 따라서 입력 상자에 읽기 전용 속성을 추가할 수 있습니다. 읽기 전용 상태이며 날짜 컨트롤에 지우기 버튼을 제공합니다. 이러한 방식으로 날짜 변경은 일반적으로 날짜 플러그인을 통해서만 제어할 수 있습니다.

단, DateTimePicker 플러그인을 사용하여 지우기 버튼을 클릭하면 Uncaught TypeError: Cannot read property 'getTime' of null 오류가 보고됩니다. 이로 인해 ChangeDate 이벤트를 정상적으로 사용할 수 없습니다.

그래서 대신 DatePicker 플러그인을 사용했습니다.

그런 다음 입력 상자의 날짜가 변경되면(삭제 포함),changeDate 이벤트가 트리거되고 다른 입력 상자의 선택적 범위가 콜백 함수에서 수정됩니다.

또한 DatePicker가 인터페이스에 중국어를 표시하려는 경우 CSS도 로드해야 합니다. bootstrap-datepicker.zh-CN.min.js.

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

function DatePicker(beginSelector,endSelector){
  // 仅选择日期
  $(beginSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView: 0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){  	
  	if(ev.date){
  		$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
  	}else{
  		$(endSelector).datepicker('setStartDate',null);
  	}
  })
  $(endSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView:0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){ 
  	if(ev.date){
  		$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
  	}else{
  		$(beginSelector).datepicker('setEndDate',new Date());
  	} 
  })
}
DatePicker("#date_begin","#date_end");

Bootstrap DatePicker는 날짜 선택을 구현합니다. 시작 날짜는 종료 시간보다 크지 않고, 종료 시간은 시작 시간보다 작지 않으며, 시작 날짜와 종료 날짜는 그렇지 않습니다. 현재 날짜보다 큽니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

ajax는 사용자 이름 등록의 전체 프로세스를 구현합니다

Ajax+PHP 데이터 상호 작용 구현

위 내용은 Bootstrap의 DatePicker 속성을 사용하여 날짜 범위를 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!