집 > 기사 > 웹 프론트엔드 > jquery UI Datepicker 시간 제어 사용 방법 분석

jquery UI Datepicker 시간 제어 사용 방법 분석

不言원래의: 2018-06-25 14:05:141922검색

이 글은 jquery UI Datepicker 시간 제어 사용법의 최종 버전입니다. 구현된 기능은 시작 시간과 종료 시간이 3일 이내로 제한되어 있습니다. 클리어 시간, 재선택 시간 등을 구성해 관심 있는 친구들이 참고할 수 있습니다

최근 프로젝트에서 날짜 제어를 사용해 본 적이 있어서 적어서 시작 시간을 제한하겠습니다. 종료 시간은 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의 3일만 사용할 수 있습니다. 다른 날짜는 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를 확인한 후에도 여전히 충분한 인내심이 필요합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

jquery UI Datepicker 시간 제어 사용 방법 분석

관련 기사