使用 jQuery Datepicker 使日期在加载时无法选择

Posted 2023-05-08

【中文标题】使用 jQuery Datepicker 使日期在加载时无法选择

【英文标题】：Make days unselectable on load with jQuery Datepicker

【发布时间】：2020-02-21 15:12:17

【问题描述】：

我有两个日期：最小值和最大值，如链接图片中所示。如何设置以便在页面加载时，在呈现页面时为“最大日期”字段设置最小日期？这样日子就变得无法选择了。我试过“onload”这样的：

onLoad: function (selectedDate) 
    if (this.id == 'datetimepickerFrom') 
        var dateMin = $('#datetimepickerFrom').datepicker("getDate");
        var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
        $('#datetimepickerTo').datepicker("option", "minDate", rMin);
    

页面加载时，日期仍然可以选择。只有当用户单击“最小日期”输入字段时，“最大日期”字段中的天数才会变为不可选择。

使用： jQuery UI 默认小部件

【问题讨论】：

是 jQuery UI deafult 小部件还是第三方插件？

@ThePueblo 它是 jQuery UI 默认小部件。我会把它添加到问题中。谢谢你的评论！

【参考方案1】：

如果您的数据库或其他地方已经有 Min 和 Max 的日期字符串，您可以使用 $.datepicker.parseDate(dateFormat, dateString) 简单地设置日期。在这里查看更多：jQuery UI API | DatePicker

var selectedDates = 
  min: "10/04/2019",
  max: "10/18/2019"
;

$(function() 
  var dateFormat = "mm/dd/yy",
    from = $("#from")
    .datepicker(
      changeMonth: true,
      minDate: $.datepicker.parseDate(dateFormat, selectedDates.min),
      maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max)
    )
    .on("change", function() 
      to.datepicker("option", "minDate", getDate(this));
    ),
    to = $("#to").datepicker(
      changeMonth: true,
      minDate: $.datepicker.parseDate(dateFormat, selectedDates.min),
      maxDate: $.datepicker.parseDate(dateFormat, selectedDates.max)
    )
    .on("change", function() 
      from.datepicker("option", "maxDate", getDate(this));
    );

  function getDate(element) 
    var date;
    try 
      date = $.datepicker.parseDate(dateFormat, element.value);
     catch (error) 
      date = null;
    
    return date;
  

  from.datepicker("setDate", selectedDates.min);
  to.datepicker("setDate", selectedDates.max);
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

【讨论】：

运行顺利。只需要用我的选择和 BAM 替换 selectedDates！我有它！ :) 谢谢老兄！

【参考方案2】：

或许能帮到你：

$(function () 
  var date = new Date();
  date.setDate(date.getDate());
  var startDate, endDate = date;

  $('.from_date').datepicker(
    format: 'dd MM yyyy',
    endDate: date,
    startDate: '18 May 2019',
    autoclose: true
  ).on('changeDate', function (selected) 
    startDate = new Date(selected.date.valueOf());
    console.log(startDate);
    $('.to_date').datepicker('setStartDate', startDate);
    if (startDate > endDate) 
      $('.to_date').datepicker('setDate', startDate);
    
  );
  $('.to_date').datepicker(
    format: 'dd MM yyyy',
    endDate: date,
    startDate: '8 Oct 2016',
    autoclose: true
  ).on('changeDate', function (selected) 
    endDate = new Date(selected.date.valueOf());
    console.log(endDate);
  );
)

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"/>


<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>


<input type="text" style="margin-top: 20px !important;" class="from_date" placeholder="Select start date" contenteditable="false">

<input type="text" style="margin-top: 20px !important;" class="to_date" placeholder="Select start date" contenteditable="false">

【讨论】：

嗯，我很愚蠢，更不用说我从数据库中获取数据并通过 ASP.NET MVC 填充视图。我们使用单独的 javascript。但也许我可以天真地在我调用函数的视图中注入一些 JS 代码