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");

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

AJAX를 사용하여 페이지 로그인 및 등록된 사용자 이름 확인을 구현하는 간단한 예

Ajax의 루프 방식

객체를 반환하는 Ajax에 대한 빠른 솔루션

위 내용은 Bootstrap의 DatePicker 날짜 범위 선택에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!