Как отобразить дату окончания 31-03 года (в зависимости от даты начала)?

Question

У меня есть два свидания. В первом указателе даты указывается дата начала, а во втором указателе даты - дата окончания.

Мой годовой диапазон составляет

2018-2019 (Last date is 31-03-2019)
2019-2020 (My start date is 01-04-2019 and the end date is 31-03-2020)
2020-2021 (My start date is 01-04-2020 and the end date is 31-03-2021)
   //and so on

Теперь по текущему году мы находимся в диапазоне 2018-2019.

Итак, моей конечной датой будет 31-03-2019.

Как отобразить дату окончания 31-03 года (в зависимости от даты начала)?

Нужно ли мне использовать jquery или PHP для этого?

$(function() {
  var year = (new Date).getFullYear();

  $(".start_date").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+1Y",
    maxDate: new Date(year, 03, 31),
    // maxDate: "+3m"
    showAnim: "clip",
    numberOfMonths: 1
  });
  $(".end_date").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+1Y",
    maxDate: new Date(year, 03, 31),
    showAnim: "clip"
    //numberOfMonths: 2
  });

});

<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>

Не могли бы вы помочь мне в этом?

Answer 1

Вы можете, используя опцию onSelect, установить maxDate в .end_date DatePicker.

$(function() {
  var year = (new Date).getFullYear();

  $(".start_date").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+1Y",
    maxDate: new Date(year, 03, 31),
    // maxDate: "+3m"
    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 + 1));
      $(".end_date").datepicker("option", "maxDate", nextYear);
    }
  });
  $(".end_date").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //maxDate    :  "+1Y",
    maxDate: new Date(year, 03, 31),
    showAnim: "clip"
    //numberOfMonths: 2
  });

});

<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>

Поскольку мы получаем дату в строке, мы можем использовать $.datepicker.parseDate(), чтобы разобрать ее в дату и увеличить год до новой даты.

Надеюсь, это поможет.