2017-12-08 7 views
0

시맨틱 UI 달력을 사용자 정의하기 위해 1 주일 간 노력하고 있습니다 가능한 과거 날짜를 비활성화하십시오. 다음과 같이 예제 URL을 붙여 넣었 으면합니다. 그리고 내 조건은 종료일을 선택하면 시작 날짜를 열면 종료 날짜가 끝나면 시작일에 선택한 모든 날이 비활성화됩니다.semantic-ui-calendar에서 과거 날짜를 비활성화하는 방법

예 :

http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

$containerEventsAlerts.find('#rangeStart').calendar({ 
     type: 'date', 
     maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()), 
     endCalendar: $containerEventsAlerts.find('#rangeEnd'), 
     onChange: function(date, text, mode) { 
      var $rangeEnd = $('#rangeEnd input'); 
      if (spa.isBlank($rangeEnd.val())) { 
       //console.log($rangeEnd.val()); 
       $('#rangeEnd input').val(text); 
      } 
     }, 
     isDisabled: function(date, mode) { 
      return true; 
     }, 
     onHidden: function() { 
      var $rangeStart = $('#rangeStart input'); 
      if (spa.isBlank($rangeStart.val())) { 
       $rangeStart.val($('#rangeEnd input').val()) 
      } 
     } 
    }); 

    $containerEventsAlerts.find('#rangeEnd').calendar({ 
     type: 'date', 
     maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()), 
     startCalendar: $containerEventsAlerts.find('#rangeStart'), 
     onChange: function(date, text, mode) { 
      var rangeStart = $('#rangeStart input'); 
      if (spa.isBlank(rangeStart.val())) { 
       $('#rangeStart input').val(text); 
      } 
     }, 
     onHidden: function() { 
      var $rangeEnd = $('#rangeEnd input'); 
      if (spa.isBlank($rangeEnd.val())) { 
       $rangeEnd.val($('#rangeStart input').val()) 
      } 
     } 
    }); 
+0

귀하의 문제에 대한 피들 링크를 만드십시오. –

+0

안녕하세요,이 문제에 대한 해결책을 찾으 셨습니다. –

+0

문제에 대한 피들러 링크를 추가하라고 요청했습니다. –

답변

0

사용중인 도서관에서 대한 붙박이 해결책이 없습니다. 그러나 아래처럼 할 수있는 해킹이 있습니다.

var today = new Date(); 
$('#rangestart').calendar({ 
    type: 'date', 
    onChange: function(date, text, mode) { 
    $('#rangeend').calendar({ 
     type: 'date', 
     minDate: date 
    }) 
    } 
}); 
$('#rangeend').calendar({ 
    type: 'date', 
    onChange: function(date, text, mode) { 
    $('#rangestart').calendar({ 
     type: 'date', 
     maxDate: date 
    }) 
    } 
}); 

필요에 따라 더 많은 수정이 필요할 수 있습니다. 그러나 당신은 그것을 모두 수동으로해야만합니다.