javascript - 如何显示结束日期和截止日期 31-03

标签 javascript jquery jquery-ui jquery-ui-datepicker

我有一个两个日期选择器。第一个日期选择器是开始日期,第二个日期选择器是结束日期。

所以我正在做的是,我的结束日期范围是31-03年(取决于开始日期)

我选择开始日期 31-01-2019,以便用户可以选择结束日期,直到 31-03-2019。这个场景对我有用(查看代码片段)。

现在我的问题是,如果用户选择开始日期01-04-2019,那么用户可以选择结束日期直到31-03-2020

所以我的截止日期是 31-03。

我知道我必须使用类似下面的代码,但我很困惑如何使用它。我应该使用 If 条件吗?

  var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy + 1));

你能帮我解决这个问题吗?

$(function() {
  var year = (new Date).getFullYear();
  $(".start_date").datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+0Y",
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    showAnim: "clip",
    //numberOfMonths: 1,
    onSelect: function(dt, dp) {
      var selected = $.datepicker.parseDate("dd-mm-yy", dt);
      var yy = selected.getFullYear();
      var mm = selected.getMonth();
      var dd = selected.getDate();

      var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));

      //alert(nextYear);
      $(".end_date").datepicker("option", "maxDate", nextYear);

    }
  });

  $(".end_date").datepicker({
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+1Y",
    //maxDate: new Date(year, 03, 31),
    showAnim: "clip"
  });

});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="form-group">
  <label>Start Date</label>
  <input type="text" name="start_date" placeholder="Start Date" id="start_date" class="start_date form-control">
</div>
<div class="form-group">
  <label>End Date</label>
  <input type="text" name="end_date" id="end_date" placeholder="End Date" class="end_date form-control">
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

最佳答案

由于开始日期仅限于当年,目标日期是该月的最后一天,因此除了开始日期所在的月份之外,您无需检查其他任何内容。

onSelect: function(dt, dp) {
  var selected = $.datepicker.parseDate("dd-mm-yy", dt);
  var yy = selected.getFullYear();
  var mm = selected.getMonth();
  var dd = selected.getDate();

  if(mm > 2) //date is later than march
    yy++;
  var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));
  $(".end_date").datepicker("option", "maxDate", nextYear);
}

关于javascript - 如何显示结束日期和截止日期 31-03,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54455541/

相关文章:

jquery - 如何禁用 jquery 数据表中的显示条目属性

javascript - jQuery-ui sortable - 在禁用可排序后再次启用可排序

javascript - NightmareJS : “Failed to execute ' querySelector' on 'Document' : '#LINK1$1' is not a valid selector.”

javascript - 添加迄今为止的序号信息

jquery - CSS 禁用按钮的颜色仅更改一次

javascript - 切换表格

javascript - Jquery Fancybox 无法显示图像

javascript - 在动态应用程序上切换页面时可靠地清除间隔

javascript - jQuery:计算购物车系统中的价格、总计、运费和增值税

jquery - 输入[disabled=true] 和 jQuery