2013-11-26 4 views
1

두 개의 입력 = "text"date-role = "datebox"동적으로 jquery 모바일의 날짜 상자의 minHour 옵션을 설정하는 방법

하나는 시작 시간입니다. 다른 하나는 종료 시간입니다.

사용자가 시작 시간을 선택하면 종료 시간 날짜 상자의 minHour 옵션이 선택한 시간으로 변경됩니다.

그럴 수 있습니까? 그렇다면 어떻게?

덕분에 내가 minHour 오른쪽 시간에 시간 선택기 팝업을 기본값으로 보인다 볼 수있는에서

+0

당신은 minHour 기능에 버그가 있는지 확인하기 위해 Datebox의 개발자에게 문의 할 수 있습니다 ... 두 번째 날짜 상자의 옵션을 선택한 다음 두 번째 날짜 상자를 새로 고칩니다. 그것은 작동하지 않았다. 그러므로 제 질문은 좀 더 일반적입니다. 나는 어떤 해결책을 제시하고자합니다. 제발 나 자신을 도우려는 시도조차하지 않고이 질문을 게시했다고 가정하지 마십시오. – WiseOlMan

답변

2

,하지만 당신은 어쨌든 이전 시간을 선택할 수 있습니다. minHour보다 이전 시간을 선택하면 datebox는 이전 시간을 표시하지만 datebox ('getTheDate')를 호출하면 나타납니다. 그것은 minHour를 반환합니다. 그래서 나는 당신을 위해 일할 수있는 해결 방법을 생각해 냈습니다. 여기

는 dateboxes의 각으로 onClose 대한 콜백을 갖는 DEMO

경우 : STARTTIME에 콜백 선택된 시간의 시간을 취득하고 종료 시각의 minHour 설정

<input name="Date1" id="Date1" type="date" data-role="datebox" 
data-options='{"mode": "timebox", "closeCallback": "Date1Close();"}' /> 
... 
<input name="Date2" id="Date2" type="date" data-role="datebox" 
data-options='{"mode": "timebox", "closeCallback": "Date2Close();"}' /> 

상자를 그 시간에 +1합니다. 그러면 '해결 방법'은 표시를 수정하기 위해 상자의 시간을 상자의 'getTheDate'로 설정하는 endtime의 콜백입니다.

function Date1Close(){ 
    var startdate = $('#Date1').datebox('getTheDate'); 
    var minH = startdate.getHours() + 1; 
    if (minH > 23) minH = 23; 
    $('#Date2').datebox({"minHour": minH}); 
} 

function Date2Close(){ 
    var enddate = $('#Date2').datebox('getTheDate'); 
    $('#Date2').datebox('setTheDate', enddate); 
    $('#Date2').trigger('datebox', {'method':'doset'}); 
} 

두 번째 콜백에서 당신은 또한 단지 startime에 종료 시각을 비교할 수 있고 끝이 시작보다 작은 경우, starttime을에 두 번째 datebox을 설정합니다. 데이터 - 변경 내가 처음 시작 시간 datebox에 가까운에 콜백 함수를 호출 시도