时间戳

首页 > 解决方案 > 如何在物化日期选择器中禁用相对于特定日期的过去日期，反之亦然

javascript - 如何在物化日期选择器中禁用相对于特定日期的过去日期，反之亦然

问题描述

**我无法禁用特定日期（如 1970 年 1 月 1 日）的过去日期**

$(document).ready(function(){
  $('.datepicker').datepicker({
    yearRange: [1970, 2010],
    defaultDate: new Date(1970, 1, 0),
    minDate: new Date(1970, 0, 1),
    maxDate: new Date(2010, 11, 31),
  });
});

标签： javascriptjquery

解决方案

我无法重现您原始问题的错误（请参阅https://jsfiddle.net/px0djq8w/）。不过，我想我找到了您在评论中提到的第二个问题的解决方案。

首先，将minYearand添加maxYear到日期选择器初始化选项中。看起来 Datepicker 代码没有为此使用minDate/ ：maxDate

  $(document).ready(function(){
    $('.datepicker').datepicker({
        // ...
        minYear: 1970,
        maxYear: 2010   
    });
  });

其次，我们需要修复 Materialize Datepicker 库中的两件事，因为我认为缺少两件事：

  1. 已经有一个用于添加到按钮的和按钮的.is-disabled类。现在的问题是，对于按钮，检查它是否应该被禁用为时已晚（在声明按钮之后，~第 9241 行）。它应该是这样的：previousnextnextprevious
if (isMinYear && (month === 0 || opts.minMonth >= month)) {
  prev = false;
}

var leftArrow = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
        html += "<button class=\"month-prev" + (prev ? '' : ' is-disabled') + "\" type=\"button\">" + leftArrow + "</button>";
  1. 现在有一个 CSS 规则来告诉浏览器如何处理一个.is-disabled. 导入库的 CSS 后需要添加这条规则：
button.is-disabled {
  visibility: hidden; // hide button
  pointer-events: none; // disable clicks
}

GitHub问题链接：https ://github.com/Dogfalo/materialize/issues/6541

推荐阅读