在引导日期选择器中禁用过去的日期

Posted 2023-05-07

【中文标题】在引导日期选择器中禁用过去的日期

【英文标题】：Disable past dates in bootstrap date picker

【发布时间】：2017-05-12 23:47:39

【问题描述】：

我使用的日期输入表单源自：

Youderian, C. How to Add a Date Picker to a Bootstrap Form。 FormDen。 [博客]。 2015-10-27.

但我无法禁用过去的日期。我尝试了以下方法；根据 GitHub 中的an issue，但它对我不起作用。

$(document).ready(function() 
  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker(
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  )
)
$(function() 
  var nowDate = new Date();
  var today = new Date(nowDate.getFullYear(), nowDate.getMonth(),
    nowDate.getDate(), 0, 0, 0, 0);
  $('#date').datepicker(
    startDate: today
  );
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <form class="form-horizontal" method="post">
          <div class="form-group ">
            <label class="control-label col-sm-2" for="date">
              Date
            </label>
            <div class="col-sm-10">
              <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button class="btn btn-primary " name="submit" type="submit">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

How to restrict the selectable date ranges in Bootstrap Datepicker?的可能重复

【参考方案1】：

您可以在首次将其转换为日期选择器字段时将startDate 添加到配置中，也可以使用setStartDate 设置属性。

选择两者中的任何一个。

$(document).ready(function() 
  var dateInput = $('input[name="date"]'); // Our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';
  dateInput.datepicker(
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: truncateDate(new Date()) // <-- THIS WORKS
  );

  $('#date').datepicker('setStartDate', truncateDate(new Date())); // <-- SO DOES THIS
);

function truncateDate(date) 
  return new Date(date.getFullYear(), date.getMonth(), date.getDate());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <form class="form-horizontal" method="post">
          <div class="form-group ">
            <label class="control-label col-sm-2" for="date">
              Date
            </label>
            <div class="col-sm-10">
              <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button class="btn btn-primary " name="submit" type="submit">
                Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

【参考方案2】：

您可以使用 startDate 和 endDate 例如'+2d', '-2m'

在您的 CodePen 链接中：

date_input.datepicker(
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: '-2d',
    endDate: '+2d'
)

How to restrict the selectable date ranges in Bootstrap Datepicker?

【参考方案3】：

jQuery Date Picker - disable past dates

这里是对您有帮助的链接。

您可以通过 mindate 和 maxdate 来做到这一点。

【讨论】：

你不会用那个链接标记关闭它吗？

这似乎不适用于 Bootstrap 日期选择器。

@Mr.Polywhirl，他是否有权以这个费率关闭问题？

code.runnable.com/WGPyKBHyWd8dnl4G/output 选中此项以获取引导日期选择器。 date.setDate(date.getDate()-1); $('#example1').datepicker( startDate: date );

【参考方案4】：

您可以通过设置 startDate 属性来禁用过去的日期。不需要单独的函数。

date_input.datepicker(
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: new Date()
)

【参考方案5】：

轻松尝试：使用 minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker( 
    minDate: today
);

【讨论】：

他使用的是 Bootstrap datepicker 而不是 jQuery datepicker，所以 minDate 无法正常工作...