如何在 JQuery Datepicker 中禁用以前的日期

Posted

技术标签:

【中文标题】如何在 JQuery Datepicker 中禁用以前的日期【英文标题】：How to Disable previous dates in JQuery Datepicker 【发布时间】：2021-03-06 11:15:19 【问题描述】：

我开始制作一个 JQuery 日历，它是关于选择一个事件的约会，我想禁用当前日期之前的日期。我还想在可用日期中添加#f48024 橙色，以更清楚地表明它们仍然可用。

我用 minDate 试过了，但到目前为止没有用。

我的问题是如何禁用当前日期之前的日期？

编辑：我添加了以下代码使其成为可能，但它复制了日历，我不知道为什么。

$(document).ready(function()
   $("#example-popover-2") .datepicker(
    minDate:0,
   )
   
   )


body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;



.popover

  left: 5% !important;
  top: 120% !important;



.btn 

    margin: 1%;



#banner-message 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;


button 
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;


#banner-message.alt 
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;


#banner-message.alt button 
  background: #fff;
  color: #000;



.popover button
  background: #f48024;


.popover button:hover
  background:#fcb67c;


.popover button:focus
  background: #052049;


.popover button:focus:active
  background: #052049;


.arrow 
  
  visibility: hidden;


.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>

</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>


<script>

$('.date-picker-2').popover(
    html : true, 
    content: function() 
      return $("#example-popover-2-content").html();
    ,
    title: function() 
      return $("#example-popover-2-title").html();
    

);

$(".date-picker-2").datepicker(

    onSelect: function(dateText)  
        $('#example-popover-2-title').html('<b>Available Appointments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    
    
);


// I added this part to the code but this duplicates the calendar.
$(document).ready(function()
   $("#example-popover-2") .datepicker(
    minDate:0,
   )
   
   )

</script> 
</body>
</html>

【问题讨论】：

【参考方案1】：

您能否检查是否有minDateTime 和maxDateTime 可用？ 比如：

    let minDateTime = new Date(someDateInThePast);
    let maxDateTime = new Date(someDateInTheFuture);
    $(".date-picker-2").datepicker(
        minDateTime: minDateTime,
        maxDateTime: maxDateTime,
        onSelect: function (dateText) 
            $('#example-popover-2-title').html('<b>Available Appointments</b>');
            var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
            $('#example-popover-2-content').html('Available times <strong>' + dateText + '</strong><br>' + html);
            $('.date-picker-2').popover('show');
        

    );


body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;



.popover

  left: 5% !important;
  top: 120% !important;



.btn 

    margin: 1%;



#banner-message 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;


button 
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;


#banner-message.alt 
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;


#banner-message.alt button 
  background: #fff;
  color: #000;



.popover button
  background: #f48024;


.popover button:hover
  background:#fcb67c;


.popover button:focus
  background: #052049;


.popover button:focus:active
  background: #052049;


.arrow 
  
  visibility: hidden;


.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>

</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>


<script>

$('.date-picker-2').popover(
    html : true, 
    content: function() 
      return $("#example-popover-2-content").html();
    ,
    title: function() 
      return $("#example-popover-2-title").html();
    

);

$(".date-picker-2").datepicker(
 minDate: new Date(),
    onSelect: function(dateText)  
        $('#example-popover-2-title').html('<b>Available Appointments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    
    
);


</script> 
</body>
</html>

【讨论】：

不，我没有找到类似的东西。 查看这里：code.jquery.com/ui 我看到了：minDate: null, // 最早可选择的日期，或 null 表示无限制 maxDate: null, // 最新可选择的日期，或 null 表示无限制您也可以查看这些示例：api.jqueryui.com/datepicker/#option-minDate Search for minDate 我编辑了snipper来使用minDate: new Date()，应该是当前的dateTime。

以上是关于如何在 JQuery Datepicker 中禁用以前的日期的主要内容，如果未能解决你的问题，请参考以下文章

如何在 jquery UI datepicker 中禁用今天之前的日期？

如何在 jquery-ui datepicker 中禁用动画？

动态禁用 jQuery Datepicker 图标

jQuery UI Datepicker - 如何动态禁用特定日期

如何在jQuery UI Datepicker中禁用下一个周末？

如何使用 jQuery datepicker 禁用每个月的最后 3 天