如何在语义 UI 日历中禁用过去的日期答案

【问题标题】：how to disable past date in semantic-ui-calendar如何在语义 UI 日历中禁用过去的日期
【发布时间】：2017-12-12 17:28:33
【问题描述】：

我正在尝试持续一周来自定义语义 UI 日历禁用过去的日期是可能的。我想要这样，我在下面粘贴了示例 URL。我的条件是，如果我选择结束日期，那么如果我打开开始日期，那么在那一天之后我在开始日历中选择的任何结束日期都将被禁用。

例子：

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

【问题讨论】：

也为您的问题创建一个提琴手链接。
嗨，您对此有任何解决方案，请告诉我
我要求为您的问题添加提琴手链接。
下面的链接 PFA....jsfiddle.net/rkrameshkumar71/2Lu8hjrb
嗨，我已经添加了 jsfiddle 链接，任何人都可以解决我的问题

标签： javascript calendar semantic-ui

【解决方案1】：

您正在使用的库中没有内置解决方案。但是你可以像下面那样做一个 hack。

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

可以根据您的需要进行更多修改。但是您必须手动完成所有操作。

【讨论】：