jquery datepicker range (mindate maxdate) 不工作答案

【问题标题】：jquery datepicker range (mindate maxdate) is not workingjquery datepicker range (mindate maxdate) 不工作
【发布时间】：2012-08-10 10:07:03
【问题描述】：

我正在尝试为表单上的 jquery datepicker 设置一个范围，但是当我打开表单时，它允许我选择任何日期。

  <input class="span2 datepicker" name="tw#local#changeRequest#DeliveryDate" type="text" id="dp1">


 <!-- jQuery -->
 <script type="text/javascript" src="<#=tw.system.model.findManagedFileByPath('jquery-1.7.2.min.js', TWManagedFile.Types.Web).url;#>"></script>

 <!-- Datepicker Script -->
 <script type="text/javascript" src="<#=tw.system.model.findManagedFileByPath('bootstrap-datepicker_new.js', TWManagedFile.Types.Web).url;#>"></script>

 <script type="text/javascript">
 $(document).ready(function(){

 $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });

 });
 </script>

【问题讨论】：

标签： jquery datepicker range maxdate mindate

【解决方案1】：

据我所知，应该是这样的：

$("#datepicker").datepicker('option', {minDate: <some date>, maxDate: <some date>});

您缺少的是应该使用“选项”来设置它们。

【讨论】：

【解决方案2】：

$('#datepicker').datepicker({
            maxDate: '0'}),

使用'0' 选择今天的最大日期

也可以参考jQueryUI Api

【讨论】：

【解决方案3】：

$('#datepicker').datepicker({
                maxDate: '+1m',
                minDate: '-20d',
                });

当 min 和 max date 是表达式时，它们应该是字符串并正确定义。 Here 是 jquery ui datepicker MaxDate 部分的链接。

【讨论】：

【解决方案4】：

还有一件事，你可能已经注意到了，但是您的选择器正在将 ID 搜索为“datepicker”。而您的日期选择器就是您的 CLASS。所以我认为你需要改变 “#datepicker”到 “.datepicker”。

【讨论】：

【解决方案5】：

你也可以测试一下。

$('#datepicker1').datepicker({
  format: 'mm/dd/yyyy',
});

$('#datepicker1').on('change', function() {
  $('#datepicker2').datepicker({
    startDate: $('#datepicker1').val()
  })
});

【讨论】：

【解决方案6】：

如果您使用 angularjs $scope.today = new Date()，只需添加控制器

在 html 中 min-date="today"

【讨论】：

【解决方案7】：

在实现 daterangepicker 时，每次我将 minDate 和 maxDate 都设置为日期时，我都会在日历中收到一个 NaN 值。尽管我分别对它们进行编码时工作，但它们在一起运行时会提示上述错误。我发现如果我添加 startDate & endDate，日历将不再显示 NaN。

<script>
        let first_date = "{{first_date}}";
        let last_date = "{{last_date}}";

        console.log(first_date);
        console.log(last_date);
        $('#picker').daterangepicker({
            opens: 'right',
            timePicker: true,
            timePicker24Hour: true,
            minDate: first_date,  // with only minDate & maxDate, NaN value in the calender 
            startDate: first_date,   // startDate & endDate highlights the date range and prints values in calender 
            endDate: last_date,
            maxDate: last_date,
            locale: {
                format: 'DD-MM-YYYY HH00'
            }
        }, function (start, end, label) {
            $('#start').text(start.format('DD-MM-YYYY HH00'))
            $('#end').text(end.format('DD-MM-YYYY HH00'))
        })
</script>

为了简要介绍上下文，我正在使用 Flask 框架开发一个 Web 门户。 {{first_date}} 是从另一个网页转移而来的 jinjja 语法。

要了解有关 daterangepicker.js 功能的更多信息，下面的链接将告诉您所有需要了解的信息。 https://www.youtube.com/watch?v=f5QA8N4tQwg&ab_channel=CodeTube

【讨论】：