집 > 기사 > 웹 프론트엔드 > jquery UI Datepicker 시간 제어 사용 (3)

jquery UI Datepicker 시간 제어 사용 (3)

PHPz앞으로: 2021-05-28 15:58:503633검색

이 글은 jquery UI Datepicker 시간 제어 사용 방법의 최종 버전입니다. 구현된 기능은 시작 시간과 종료 시간이 3일 이내로 제한되어 있으며 삭제 시간, 재선택 시간 등으로 구성됩니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

두 가지 렌더링을 먼저 보여드리겠습니다

jquery UI Datepicker 시간 제어 사용 (3)

예에서 제가 제어하는 시작 시간과 종료 시간은 3일입니다. 즉, 시작 시간과 종료 시간 사이의 간격은 설정할 수 없습니다. 3일을 초과합니다.

구체적으로 구현하는 방법은 코드에 매우 자세히 설명되어 있습니다. 계속 읽어보세요.

첫 번째 단계는 컨트롤 js를 소개하는 것입니다. 하나는 jquery.js입니다. jquery-ui-datepicker.js이며 물론 스타일 파일을 소개합니다.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

2단계: 텍스트 입력 상자 만들기, 텍스트 유형 입력 및 삭제 시간 설정도 내 데모에 작성되어 있습니다. 버튼은 이벤트에 응답합니다

<td width="35%">
    <label>开始时间：</label>
    <input type="text" name="start" id="start" value="${params.start}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>
   <td width="35%">
    <label>结束时间：</label>
    <input type="text" name="end" id="end" value="${params.end}" readonly="true" title="日期范围不能大于3天"/>
    <input type="button" class="formButton" value="清空" onclick="cleaPrevInput(this);"/>
    <font color="red">必选*</font>
   </td>

. 그 안에 들어있는 값은 걱정할 필요가 없습니다. 페이지가 새로고침될 때 값이 이렇게 쓰여 있습니다. 쿼리 후에도 시간 상자에 선택한 시간 값이 남아 있을 수 있습니다.

다음 코드는 날짜 컨트롤을 호출하는 것입니다.

$(function(){
 // 获取调用控件的对象
 var dates = $("#start,#end");
 var option;
 //设置目标时间，因为例子中的开始时间和结束时间是有时间限制的
 var targetDate;
 var optionEnd;
 var targetDateEnd;
 dates.datepicker({
  showButtonPanel:false,
  //当选择时间的时候触发此事件
  onSelect: function(selectedDate){ 
   if(this.id == "start"){
   // 如果是选择了开始时间
   option = "minDate";
   //getTimeByDateStr 这个方法的代码下面会贴出来的，就是处理时间的代码
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
   targetDate = new Date(minTime);
   //设置结束时间
   optionEnd = "maxDate";
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间
   option = "maxDate";
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置开始时间
   optionEnd = "minDate";
   targetDateEnd = new Date(maxTime-2*24*60*60*1000);

   }
   //设置时间框中时间，比如根据选择的开始时间，限制结束时间的不可选项,dates.not(this)是js选择器使用，
   //datepicker("option", option, targetDate),这个就是日期控件封装的api了
   dates.not(this).datepicker("option", option, targetDate); 
   dates.not(this).datepicker("option", optionEnd, targetDateEnd); 
  }
 });
});

이제 모두의 편의를 위해 위 코드에 getTimeByDateStr(XXX) 메서드의 코드를 게시하겠습니다. :

//根据日期字符串取得其时间
function getTimeByDateStr(dateStr){
 var year = parseInt(dateStr.substring(0,4));
 var month = parseInt(dateStr.substring(5,7),10)-1;
 var day = parseInt(dateStr.substring(8,10),10);
 return new Date(year, month, day).getTime();
}

이제 코드에서 날짜 제어 사용을 구현할 수 있으며 시작 시간과 종료 시간은 3일 이내로 제한됩니다. 예를 들어 시작 시간을 2014-03-으로 선택하면 27이면 종료 시간은 27, 28, 29만 됩니다. 요일은 선택 사항이며 다른 날짜는 클릭할 수 없습니다. 종료 시간을 28로 선택한 경우 시작 시간은 28, 27, 26만 선택할 수 있습니다. 시간, 그게 다야.

3단계: 여러분, 지우기 버튼을 보세요. 지우기 버튼은 시간 선택 상자의 값을 지우는 것입니다 구현 방법은 매우 간단합니다.

//清空日历控件
function cleaPrevInput(objs){
 //清空输入框中的值，但是仅仅是清空了值而已，时间控件的选值限制还在的
 $(objs).prev().val("");
 //如果开始时间和结束时间都清空了，这时应该是你选择的那个框中是没有时间限制的，也就是说可以随便选择日期
 if($(&#39;#start&#39;).val()=="" && $(&#39;#end&#39;).val()==""){
 var dates = $("#start,#end");
 //调用datepicker封装的api，使刚刚设置的开始时间和结束时间为空，这样就可以选择任意日期了
 dates.datepicker("option", "minDate", null);
 dates.datepicker("option", "maxDate", null);
 }
}

지금 사용하면 됩니다. 컨트롤을 사용하면 설정이 필요하지 않습니다. 시간 제한은 매우 간단합니다. 위 코드는 대부분의 날짜 선택 요구에 사용할 수 있지만 특별한 경우에는 여전히 API를 직접 확인해야 합니다. 날짜 컨트롤의 값(dates.datepicker("option", "maxDate", null)))을 지우고 싶었습니다. 방금 API를 오랫동안 확인했지만 여전히 모든 사람이 충분한 인내심을 가져야 합니다.

이상은 jquery UI Datepicker 시간 제어에 대한 전체 소개입니다. 앞으로 관련 기사가 있으면 최대한 빨리 공유하겠습니다.