如何在語義UI日歷中禁用過去的日期

Question

我試圖過去一個星期來自定義“語義UI日歷禁用”，但有可能過去。 我想要這樣，我在下面粘貼了示例網址。 我的條件是，如果我選擇結束日期，那么如果我打開開始日期，那么該天之后我在開始日歷中選擇的任何結束日期都將被禁用。

例：

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())
            }
        }
    });

Answer 1

您正在使用的庫中沒有針對此的內置解決方案。 但是下面有一個您可以采取的措施。

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
    })
  }
});

根據您的需要，可能還需要一些其他修改。 但是，您必須手動完成所有操作。