在 DateRangePicker 中将 minDate 设置为当前日期答案

【问题标题】：Set minDate to current date in DateRangePicker在 DateRangePicker 中将 minDate 设置为当前日期
【发布时间】：2019-11-21 00:35:42
【问题描述】：

我正在使用 DateRangePicker 作为日期。我试图通过将最小日期设置为当前日期来禁用过去的日期，如下所示。它没有做任何事情。

$('.daterange-single').daterangepicker({ 
        singleDatePicker: true,
        minDate: today
    });

但是当你如下给出实际日期时它工作正常。

$('.daterange-single').daterangepicker({ 
        singleDatePicker: true,
        minDate: "7/11/2019"
    });

请帮助我如何在 DateRangePicker 中将 minDate 设置为当前日期

【问题讨论】：

dotnetqueries.com/Article/105/…
变量“今天”在哪里定义？你可以使用 jquery-ui 或者看看 moment.js.... 否则 vanilla JS

标签： javascript jquery momentjs daterangepicker bootstrap-daterangepicker

【解决方案1】：

将today的值设置为从moment()时刻开始的当前日期

var today = moment()

或者只是一个日期对象

var today = new Date()

$('#datetimepicker').datetimepicker({
  minDate: moment()
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
<input type="text" id="datetimepicker">

【讨论】：

【解决方案2】：

您可以尝试设置一个变量来包含今天的日期并将其用作 minDate

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //As January is 0.
var yyyy = today.getFullYear();
var todayDateString = dd+"/"+mm+"/"+yyyy;

$('.daterange-single').daterangepicker({ 
    singleDatePicker: true,
    minDate: todayDateString
});

【讨论】：

【解决方案3】：

您可以在 daterangepicker 中将minDate 设置为当前日期。你可以试试下面的代码：

$(function() {
  $('input[name="birthday"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    minDate: new Date(),
    maxYear: parseInt(moment().format('YYYY'),10)
  });
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" name="birthday" />

【讨论】：

当我在上面运行你的代码 sn-p 时，为什么 maxDate 会自动填充输入标签？