如何在日历javascript中禁用以前的日期？

Posted 2023-05-07

【中文标题】如何在日历javascript中禁用以前的日期？

【英文标题】：How to disable previous dates in calendar javascript?

【发布时间】：2018-09-13 13:12:00

【问题描述】：

我正在尝试禁用日历中以前的日期。我正在使用这样的代码

我的 HTML 代码如下。

<input type="text" required name="date_from" name="date_from" class="mydate input-text full-width" placeholder="Departure Date" />

我的脚本代码。

<script type="text/javascript">
 $(".mydate").datepicker(
       format:'yyyy-mm-dd',
       autoclose: true
   );
    $(".flexslider").flexslider(
        animation: "fade",
        controlNav: false,
        animationLoop: true,
        directionNav: false,
        slideshow: true,
        slideshowSpeed: 5000
    );
</script>

它显示没有禁用以前日期的日历。

【参考方案1】：

试试这个：

$( ".mydate" ).datepicker( minDate: 0);

【参考方案2】：

使用bootstrap date picker。这些是要包含的文件

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

使用此代码禁用以前的日期

html 输入框

<input id="date" data-provide="datepicker" name="date_from" >

JAVASCRIPT

var date = new Date();
date.setDate(date.getDate());

$('#date').datepicker( 
startDate: date
);

【参考方案3】：

您需要在应用日期选择器时设置 minDate 选项。

试试这个，

<script type="text/javascript">
$(".mydate").datepicker(
       format:'yyyy-mm-dd',
       autoclose: true,
       minDate: 0,   
); 
</script>

【参考方案4】：

您必须设置 minDate 选项。这个论坛上的例子+小提琴：

jQuery Date Picker - disable past dates

【参考方案5】：

在 datepicker 的初始化中设置 minDate

minDate:new Date()


$(".mydate").datepicker(
       format:'yyyy-mm-dd',
       autoclose: true,
       minDate:new Date()
   );

【参考方案6】：

从您的格式来看，您可能正在使用引导日期选择器。所以使用startDate 禁用以前的日期

$(".mydate").datepicker(
       format:'yyyy-mm-dd',
       startDate: new Date(),
       autoclose: true
   );

【讨论】：

感谢先生的快速答复。德赛

很高兴帮助@nirvi。如果解决方案对您有帮助，那么您可以投票以获取未来的读者帮助

【参考方案7】：

试试这个代码...如果用户提交的表单日期小于今天的日期，这将限制用户，然后显示更改日期的警报消息。

HTML 代码

    <form name="myform" onsubmit="return validateDateOfAppointment()">
    <input type="date" name="Date of Appointment" placeholder="Date of Appointment" id="Date" />
</form>

JavaScript 代码

function validateDateOfAppointment()
        var date=document.getElementById("Date").value;
        var d=new Date();
        var x=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
        var checkDate=date.substr(8,2);
        var equalDate=d.getDate();
        var checkMonth=date.substr(5,2);
        var equalMonth=d.getMonth();
        var checkYear=date.substr(0,4);
        var equalYear=d.getFullYear();
        if(checkMonth>=equalMonth)
            if(checkDate<equalDate)
            alert("Date cannot be less than today!! ");
            return false;
            
        
        else if(checkMonth<equalMonth)
            if(checkYear<equalYear)
                alert("Date cannot be less than today!! ");
                return false;
            
        
     

【讨论】：

1) 为什么不只是 new Date("date from input").getTime() - new Date().getTime() ？ 2）你应该使用 onchange 甚至类似的东西吗？

我在表单提交中使用了此代码，用户只需输入当前日期和未来日期......现在我添加了更多代码以提供更多说明......我使用“onsubmit”用于在表单提交期间检查正确的日期。 1）我们从用户那里获取日期作为字符串，所以我们不能直接从中检索时间或日期，所以我使用字符串方法来获取日期、月份和年份