2014-12-31 6 views
2

는 STARTDATE 날짜 선택기가 나는 종료 날짜의 datepickers는 STARTDATE + 1 일되고 싶어 선택 사용, STARTDATE 및 종료 날짜JQuery와 시작 날짜로부터 datepickers- 설정 종료 날짜

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> 
<input id="EndDate" class="datepicker hasDatepicker" type="text" value="15/02/2015" name="EndDate"> 

두 JQuery와 datepickers이 있습니다, StartDate보다 EndDate에서 이전 날짜를 선택할 수 없게 만들 수 있습니다. '그래서이 (가) onSelect를 확인하지만 다음 날짜에 1을 추가하는 (난 그냥 끝에 1과 날짜 열을 얻을 작동하지 않습니다에 도달

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: 'dd/mm/yy', 
     onSelect: function(selectedDate) { 
      if(this.id == 'StartDate') { 
       var minDate = selectedDate + 1; 
       $('#to').datepicker("option", "minDate", minDate); 

      } 
     } 
    }); 
}); 

, 그래서 :

이 코드를 2014 년 3 월 31 일 '). 내일처럼

   var minDate = new Date(selectedDate); 
       var tomorrow = new Date(); 
       tomorrow.setDate(minDate.getDate() + 1); 
       $('#to').datepicker("option", "minDate", tomorrow); 

minDate이 잘못된 날짜 인 끝 :

는 또한되어 selectedDate이 문자열이 아닌 날짜 형식이라고 가정하여 onSelect를에 다음과 같은 노력했다. 문자열에서 날짜를 설정하는 방법을 알아낼 수 없습니다.

var minDate = selectedDate.getDate(); 

"Uncaught TypeError : 정의되지 않은 함수가 아닙니다."라는 메시지가 나타납니다.

JQuery 1.11.1을 사용하여 영국 날짜 형식을 dd/mm/yyyy로 지정합니다.

+0

: VAR 날짜 2 = $ ('#의 STARTDATE')을 날짜 선택기 ('GETDATE', '+ 1D'); date2에 대한 유효한 날짜를 얻을 수 있습니까? –

+1

문자열을 날짜로 구문 분석 할 때 표시 형식 *을 사용하지 않으므로'dd/mm/yy'는'new Date (selectedDate)'에 잘못된 날짜를 반환합니다 –

답변

1

당신이 일을 추가하는 또 다른 날짜 선택기의 날짜 선택기 날짜를 변경하려는 경우, 당신은 다음과 같이 수행 할 수 있습니다

참고 유효한 문자열 일 수 없습니다되어 selectedDate는 형식 일/월/년에 Date 생성자에서 사용할 형식. 그런 다음 그것을 파싱해야합니다. 여기

 var arr = selectedDate.split("/"); 
     var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
     var minDate = new Date(y, m, d + 1); 
     $("#EndDate").datepicker('setDate', minDate); 

당신은 당신은 하여 setDateGETDATE를 사용할 수있는 작업 예를 fiddle

+0

@TrueBlueAussie 예제를 시도해보고 작동하는지 확인하십시오 – acontell

+0

나는 그것을 뒤로 가져 간다. 자바 스크립트 라이브러리는 미쳤다. :) –

+0

@TrueBlueAussie 나는 알고있다 :) 고마워! – acontell

0

있습니다.

예 :

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> 
<script> 
function convertInputtoDate(){ 
    var input = document.getElementById("StartDate").value; 
    var date = input.split('/'); 
    var selectdate = new Date(date[2], date[1], date[0]); 

    return selectdate; 
} 
var today = convertInputtoDate(); 
var tomorrow = new Date(convertInputtoDate()); 
tomorrow.setDate(today.getDate() + 1); 
alert('Today : ' + today + ' Tommorow :' + tomorrow.toLocaleString()); 
</script> 

날짜 형식을 변경하고자하는 경우, 사용

tomorrow.toLocaleString(); // output will be : d/m/Y H:M:S 

그리고 현재까지 입력을 변환 : 여기

function convertInputtoDate(){ 
    var input = document.getElementById("StartDate").value; 
    var date = input.split('/'); 
    var selectdate = new Date(date[2], date[1], date[0]); 

    return selectdate; 
} 
+1

사실, dd/mm/yy 날짜 형식도 문제이므로 특정 질문에이 값을 적용해야합니다. –

+0

tomorrow.toLocaleString()을 사용할 수 있습니다. – Invicnaper

+0

아직 질문과 일치하지 않습니다 ... 오늘이 아니라 시작일이 필요합니다. JSFiddle을 완성 해보십시오. –

1

난시키고있다 사용자는 10 일의 간격 만 선택하고 요구 사항에 따라 수정할 수 있습니다. .이 같은 시도하면 어떻게됩니까

$(document).ready(function() { 
 
    var minDate ; 
 
    var maxDate; 
 
    var mDate 
 
    var j = jQuery.noConflict(); 
 
    j("#startTime").datepicker({ 
 
    onSelect: function() { 
 
    minDate = j("#startTime").datepicker("getDate"); 
 
    var mDate = new Date(minDate.setDate(minDate.getDate())); 
 
    maxDate = new Date(minDate.setDate(minDate.getDate() + 10)); 
 
j("#endTime").datepicker("setDate", maxDate); 
 
j("#endTime").datepicker("option", "minDate", mDate); 
 
j("#endTime").datepicker("option", "maxDate", maxDate); 
 
} 
 
}); 
 
var tdate = new Date(); 
 
var ddate = new Date(tdate.setDate(tdate.getDate() + 10)); 
 
j("#startTime").datepicker("setDate", new Date()); 
 
j("#endTime").datepicker(); 
 
j("#endTime").datepicker("setDate",ddate); 
 
    });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div>Please Select Dates:</div> 
 
\t <p>Strat Date:<input id ="startTime" type="text" ></input></p> 
 
\t <p>End Date:<input id ="endTime" type="text" ></input></p>

관련 문제