minDate 和 maxDate 选项在 datepicker 中不起作用答案

【问题标题】：minDate and maxDate options are not working in datepickerminDate 和 maxDate 选项在 datepicker 中不起作用
【发布时间】：2017-11-07 12:59:18
【问题描述】：

我在我的项目中使用“datepicker”插件，它设置为十年视图，我想禁用未来的日期，为此我使用了maxDate 选项，但它不起作用，我的代码：

$('#data_1 .input-group.date').datepicker({
    todayBtn: "linked",
    maxDate: "0",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true
});

尝试使用 0 和 new Date

【问题讨论】：

我在 api 的 web 中尝试：uxsolutions.github.io/bootstrap-datepicker ;如果你把今天放在结束日期输入它的生成 - endDate: "today" - 所以尝试删除 maxDate 并添加 endDate: "today"

标签： jquery datepicker bootstrap-4 bootstrap-datepicker maxdate

【解决方案1】：

注意bootstrap-datepicker没有maxDate选项，你必须使用endDate。

这是一个工作示例：

$("#datepicker").datepicker({
  todayBtn: "linked",
  endDate: new Date(),
  keyboardNavigation: false,
  forceParse: false,
  calendarWeeks: true,
  autoclose: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control" id="datepicker">

【讨论】：

【解决方案2】：

试试下面的代码：

var today = new Date();  
$('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            endDate: "today",
            maxDate: today
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

你也可以试试：

 maxDate: 0

【讨论】：

试过你的解决方案不起作用，是的，我用“0”和“new date()”都试过了，似乎没有任何效果！！

【解决方案3】：

添加属性 data-date-end-date="0d" 对我有用：

<input type="text" id="birthDay" data-date-end-date="0d">

【讨论】：

【解决方案4】：

如果您正在尝试日历的开始日期和结束日期，那么这将对您有所帮助:)

`$("#from").datepicker({
    format : 'dd-mm-yyyy',
    endDate: '<?php echo $to; ?>',
    changeMonth: false,
    changeYear: false,
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "startDate", selectedDate);
    }
});
$("#to").datepicker({
    format : 'dd-mm-yyyy',
    startDate: '<?php echo $from; ?>',
    changeMonth: false,
    changeYear: false,
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "endDate", selectedDate);
    }
});`

【讨论】：