jquery UI Datepicker 시간 제어 사용 방법(최종 버전)_jquery

최근 프로젝트에서 날짜 제어를 사용해왔는데, 적어서 모두와 공유하겠습니다. 시작 시간과 종료 시간을 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로 선택하면 종료 시간은 3일입니다. 27, 28, 29. 선택사항입니다. 종료 시간을 28로 선택하면 이제 시작 시간은 28, 27, 26만 가능합니다.

3단계: 지우기 버튼 보기 지우기 버튼은 시간 선택 상자의 값을 지우는 것입니다. 구현은 매우 간단합니다.

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

이제 컨트롤만 사용하면 시간 제한을 설정하지 않고 매우 간단하게 사용할 수 있습니다. 위 코드는 대부분의 날짜 선택 요구 사항에 사용할 수 있지만 특별한 것이 있는 경우에는 확인이 필요합니다. 그 당시에는 날짜 컨트롤의 값을 지우기 위해 오랫동안 API를 확인했는데, 이는datepicker("option", "maxDate", null)입니다. 인내심을 충분히 가질 수 있도록.

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