如何在日期选择器中禁用未来日期？

Question

我已经使用以下代码，但它没有起作用。请帮助我完成它。

$(document).ready(function () {

        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            autoclose:true,
            endDate: "today",

        }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });


        $('.datepicker').keyup(function () {
            if (this.value.match(/[^0-9]/g)) {
                this.value = this.value.replace(/[^0-9^-]/g, '');
            }
        });
    });

- Praddyumna Sangvikar

---

尝试使用以下代码：$("ID").datepicker('option', 'maxDate', new Date()); - KiRa

日期更改：一旦您获取所选日期，只需在此行中解析该日期 $（“ID”）.datepicker（{maxDate：selected Date（）}）;，并将此行添加到 on（'ChangeDate'）事件中。 - Soni Vimalkumar

如果您想在更改日期之前禁用日期，则上面的 KiRa 已经提供了解决方案。请见代码。 - Soni Vimalkumar

Answer 1

你可以这样做：日期选择器有一个选项 maxDate。

$(document).ready(function () {
        var today = new Date();
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            autoclose:true,
            endDate: "today",
            maxDate: today
        }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });


        $('.datepicker').keyup(function () {
            if (this.value.match(/[^0-9]/g)) {
                this.value = this.value.replace(/[^0-9^-]/g, '');
            }
        });
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Select Date: <input type="text" class="datepicker"></p>

- Sorangwala Abbasali

---

$未定义...请在上方添加jQuery链接以完成示例。 - Soni Vimalkumar

请再次确认我的最新更新。现在终于可以正常工作了。 :) - Soni Vimalkumar

谢谢 @abbasali.. :) - Soni Vimalkumar

我正在使用Bootstrap日期选择器，但它无法正常工作。 - Praddyumna Sangvikar

@PraddyumnaSangvikar，你现在遇到什么问题了吗？ - Sorangwala Abbasali

Answer 2

使用maxDate:'0'可以实现此目的。

演示代码

$("#datepicker").datepicker({
  dateFormat: 'yy-mm-dd ',
  maxDate:'0'
});

- 4b0

Answer 3

如果你想禁用从今天开始的未来日期，请使用today.getFullYear() - 10，以便在10年前禁用，这意味着禁用从2008年开始。

<script>
 $(document).ready(function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear()-10; // change according to year 0 for current
var today1 = mm + '/' + dd + '/' + yyyy;
$("#birthday").datepicker({
     endDate:today1,
    });
});
</script>

- abhishek kumar

---

如果您想要将日期设置为从今天开始往后的某个时间，请使用today.getFullYear()；因为-10表示禁用10年前，这意味着从2008年开始禁用。 - abhishek kumar

将来请直接在您的答案中点击“编辑”按钮添加额外信息。 - L. Guthardt

Answer 4

如果您正在使用bootstrap-4 date-picker，您可以在输入标签中添加以下属性："data-date-end-date" => "0d"。

- msrajwat298

Answer 5

$(document).ready(function () {
        var today = new Date();
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            autoclose:true,
            endDate: "today",
            maxDate: today
        }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });


        $('.datepicker').keyup(function () {
            if (this.value.match(/[^0-9]/g)) {
                this.value = this.value.replace(/[^0-9^-]/g, '');
            }
        });
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Select Date: <input type="text" class="datepicker"></p>

- ASWATH DAS O

---

首先，欢迎来到StackOverflow。根据社区的建议，建议在源代码中包含上下文以获得适当的响应。请查看如何编写好问题的文档。 - Carlos Cavero

@CarlosCavero 你知道这是一个回答而不是一个问题，对吧？ - Zoe stands with Ukraine

无论如何，请查看如何回答。 - Zoe stands with Ukraine

谢谢@Zoe，我可能弄混了，可能是在编辑另一个问题:(。对此我深表歉意。 - Carlos Cavero

Answer 6

var DateIssue = $("#BodyContentPlaceHolder_dat_xxxx_xxxx_True");
              var DateOpts = {
              showButtonPanel: true,
              timepicker:false,
              dateFormat: "yy-mm-dd",
              buttonText: "" ,
              changeMonth: true,
              changeYear: true,
              yearRange: "-100:+50",
              beforeShow: beforeShowDatePicker
};
    DateOpts = {
    maxDate: new Date(),
    showButtonPanel: true,
    timepicker:false,
    dateFormat: "yy-mm-dd",
    buttonText: "",
    changeMonth: true,
    changeYear: true,
    yearRange: "-100:+50",
    beforeShow: beforeShowDatePicker
};
  $(DateIssue).datetimepicker('destroy');
  $(DateIssue).datepicker(DateOpts)

- Abhishek Karn

Answer 7

可以简单地通过以下方式实现：它将从今天的日期开始禁用。

$("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        maxDate: "-1d",
        minDate: "-100Y",
        yearRange: "-100:-0"
    });

- Pergin Sheni