как отобразить дату окончания с датой отсечки 31-03 - PullRequest
Новая
       7

как отобразить дату окончания с датой отсечки 31-03

0 голосов
/ 31 января 2019

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

Итак, что я делаю, так это мой диапазон дат окончания 31-03-year(depending upon the start date).

Я выбираю дату начала31-01-2019, чтобы пользователь мог выбрать дату окончания до 31-03-2019.Этот сценарий работает для меня (Проверьте во фрагменте).

Теперь моя проблема заключается в том, что если пользователь выбирает дату начала 01-04-2019, то пользователь может выбрать дату окончания до 31-03-2020.

, поэтомумой номер даты 31-03.

Я знаю, что должен использовать что-то вроде приведенного ниже кода, но я не совсем понимаю, как мне это использовать.Должен ли я использовать, если условие?

  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>

Ответы [ 4 ]

0 голосов
/ 31 января 2019 
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();

        if(mm > 2) {
          yy++;
        }
        else {
            yy;
        }
        var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));
        $(".end_date").datepicker("option", "maxDate", nextYear);

    }
});

$(".end_date").datepicker({
    buttonText: "Select date",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    showAnim: "clip",
});
0 голосов
/ 31 января 2019

Поскольку начальная дата ограничена текущим годом, а целевой датой является последний день месяца, у которого вы не проверяете ничего, кроме месяца начальной даты. 

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);
}
0 голосов
/ 31 января 2019

Я бы так и сделал 

$(function() {
  let today = new Date(Date.UTC());
  let currentYear = today.getUTCFullYear();
  $(".start_date").datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    yearRange: currentYear+':'+currentYear,
    minDate: 0,
    showAnim: "clip",
    onSelect: function(date) {
      let selectedDate = new Date(date.split('-').reverse().join('-'));
      let selectedYear = selectedDate.getUTCFullYear();
      let cutoffDate = new Date(Date.UTC(selectedYear, 2, 31));
      let maxDate = selectedDate > cutoffDate ?
        new Date(Date.UTC(selectedYear+1, 2, 31)) :
        new Date(Date.UTC(selectedYear, 2, 31));
      $('.end_date').datepicker('option', 'minDate', date);
      $('.end_date').datepicker('option', 'maxDate', '31-03-'+maxDate.getUTCFullYear());
      $('.end_date').datepicker('option', 'yearRange', currentYear+':'+maxDate.getUTCFullYear());
    }
  });
  
  $(".end_date").datepicker({
    dateFormat: "dd-mm-yy",    
    changeMonth: true,
    changeYear: true,
    yearRange: currentYear+':'+currentYear,
    minDate: 0,
    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>
0 голосов
/ 31 января 2019

Эта функция найдет вас на следующий 31 марта после даты ввода.После этого все должно быть просто. 

var myDate = new Date("2018-04-01")
myDate.setUTCMonth(Math.floor((myDate.getUTCMonth() + 10)/12)*12 + 2)
myDate.setUTCDate(31)
myDate.setUTCHours(0)
myDate.setUTCMinutes(0)
myDate.setUTCSeconds(0)
console.log(myDate)

Вот оно работает ... 

$(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 myDate = $.datepicker.parseDate("dd-mm-yy", dt);
      myDate.setUTCMonth(Math.floor((myDate.getUTCMonth() + 10)/12)*12 + 2)
      myDate.setUTCDate(31)
      myDate.setUTCHours(0)
      myDate.setUTCMinutes(0)
      myDate.setUTCSeconds(0)
      console.log(myDate)

      $(".end_date").datepicker("option", "maxDate", myDate);

    }
  });

  $(".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>
...