2017-12-08 15 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 
    }) 
    } 
}); 

必要に応じていくつかの変更が必要になることがあります。しかし、あなたはそれをすべて手動で行う必要があります。

関連する問題