jQuery datepicker maxDate 问题答案

【问题标题】：jQuery datepicker maxDate issuejQuery datepicker maxDate 问题
【发布时间】：2016-10-18 08:15:52
【问题描述】：

我有以下 jQuery datepicker 代码

        $('#startDate').datepicker({
            format: "dd/mm/yyyy",
            maxDate: '0'
        })
        .on('changeDate', function (ev) {
            $('#startDate').datepicker('hide');
        });

它以 Bootstrap 模式启动。除了 maxDate 之外，它按预期工作 - 我想限制用户在未来输入任何日期 - 有什么我遗漏的吗？我也试过maxDate : new Date()，但也没有用。我重新加载并检查了开发工具，我可以看到渲染标记中的 java-script 符合预期。

更新了完整的 html 标记。

<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">

使用 jQuery 1.10.2 和 Angular 1.4.1

【问题讨论】：

您所拥有的是正确的，并且应该提供所需的行为。你有链接到它不工作的地方吗？
maxDate = $( ".selector" ).datepicker( "getDate" );
站点注释，这不会阻止用户在字段中输入未来的日期，而只会阻止他们从日期选择器本身中选择这些未来的日期。
对我来说很好，但正如 MasNotsram 所说，它只会阻止他们在 UI 中选择未来的日期，而不是在框中输入它们。另外，您的日期格式设置不正确，应该是dateFormat: "dd/mm/yy" - 请参阅api.jqueryui.com/datepicker/#option-dateFormat
最后，你不需要“.on”方法——当有人选择日期时，选择器会自动隐藏。该代码是多余的。

标签： javascript jquery angularjs jquery-ui datepicker

【解决方案1】：

希望这对你有用

$( "#datepicker" ).datepicker({
    format: "dd/mm/yyyy",
    maxDate: 0
});

【讨论】：

“格式”和“结束日期”都不是 jQuery 日期选择器的属性。（见api.jqueryui.com/datepicker）这个答案无济于事。
抱歉，我以为您使用的是 Jquery 引导 datepicker，这肯定对您有用：- $( "#datepicker" ).datepicker({ format: "dd/mm/yyyy", maxDate: 0 });在这里你可以查看testing
@gauravjoshi - 你的原始答案是正确的，如果你有说明说我使用 bootstrap datepicker 和你的代码，那么你使用的属性可能会更清楚 -很遗憾你被自动否决了
@Ctrl_Alt_Defeat 公平地说，原始问题清楚地表明正在使用 jQuery datepicker。因此，我的评论是基于该假设。没有可靠的方法可以从这个问题中看出它可能不是。直到后来您通过查看代码中的其他地方才意识到情况并非如此。

【解决方案2】：

您想阻止用户在文本框中输入日期，然后在您的文本框中添加readonly='true'。

HTML

<input id="Datepicker" type="text" readonly='true' />

演示： Click here

【讨论】：

这是反用户。特别是对于那些在鼠标上使用键盘的人或有可访问性问题的人来说，这是很糟糕的。例如，我认识很多打字员，他们会在表单中使用 Tab 键并在其中输入值，而不是使用鼠标来选择每个字段。这样的人会觉得这非常烦人。此外，您的演示没有纠正不存在的format 属性或不正确的格式字符串的错误
@ADyson 好主意，我同意你的观点！但他需要阻止用户在文本框中输入日期，所以根据他的问题，我发布了这个答案。
在原始问题中，OP 从未要求阻止用户在框中输入内容。令人困惑的是为什么日期选择器不起作用（结果证明是因为他们使用的插件与他们认为的插件不同）。然后 OP 建议防止在 cmets 中的框中键入作为一种解决方法，但我在那里发表了相同的评论，认为这不利于可用性 - 而是应该使用验证规则来确保输入可接受的值。

【解决方案3】：

学到的经验是搜索其他开发人员添加到项目中的库，不要假设它是您过去使用的库 - 我几乎在我开发的所有其他地方都使用过 jQuery Datepicker。这个特定的 Dev 包含 bootstrap js datepicker。它的选项是 endDate 并且还有一个自动关闭选项，所以我什至可以摆脱正在隐藏的“on”事件处理程序

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

【讨论】：