how to display the end date with the cut off date 31-03

Question

I have a two date picker. In the first date picker is a start date and second date picker is an end date.

So What I am doing is, My end date range is 31-03-year(depending upon the start date).

I choose start date 31-01-2019 so the user can choose end date till 31-03-2019. This scenario is working for me (Check in the snippet).

Now my issue is if the user chooses start date 01-04-2019 then end date user can choose till 31-03-2020.

so my cut of date is 31-03.

I know I have to use something like below code but I am confused how do I use that. Should I use If the condition?

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

Would you help me out on this issue?

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

Possible duplicate of [How do I display the end date 31-03- year(depending upon the start\_date)?](https://stackoverflow.com/questions/54265576/how-do-i-display-the-end-date-31-03-yeardepending-upon-the-start-date) — Twisty, Jan 31 '19 at 16:39

bbsimonbb · Answer 1 · 2019-01-31T08:57:03.287

This function will find you the next 31st of March after the input date. After that it should be straightforward.

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)

Here it is working...

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

answer updated. Check this thoroughly but it seems to be working. You should do something to limit end date to dates *after* start date? — bbsimonbb, Jan 31 '19 at 08:57

score 1 · Answer 2 · answered Jan 31 '19 at 08:23

1

As start date is limited to current year and target date is the last day of the month you dont have check anything else but the month of the start date.

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);
}

answered Jan 31 '19 at 08:23

Sven Liivak

1,323
9
10

Give me some time to check this answer – user9437856 Jan 31 '19 at 08:33
This approach will work, but... The input will be a midnight UTC date object. If you manipulate it with non-UTC methods you will get [weird timezone effects](https://stackoverflow.com/a/38050824/1585345). getDate() will return the day before for users West of London. – bbsimonbb Jan 31 '19 at 08:34

score 0 · Answer 3 · 2019-02-01T07:33:35.207

0

That's the way I would do that

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

edited Feb 01 '19 at 07:33

answered Jan 31 '19 at 08:55

thanks for the answer, but in the start date it's displaying all the years. I need an only current year. Also, I choose date 01-04-2019 in the start date and end date it's still showing 2019. It should be March 2020 – user9437856 Jan 31 '19 at 09:00
This answer got two thumbs up. but why? This is not an expected output. – user9437856 Jan 31 '19 at 09:03
This is all fine, but you're going to have weird timezone issues. If you're on windows, right click on your clock, bottom right. Set timezone to anything negative, anywhere in America for example, then do `new Date('2018-01-01').getFullYear()`. **Do you see what you expect ?** To safely manipulate dates, you need to be sure to keep out timezone, by only using UTC methods. – bbsimonbb Jan 31 '19 at 09:39
Nearly !... `new Date()` on line 14 is timezone sensitive. It gives you a date *plus a time* and it will behave differently for users in [different timezones](https://stackoverflow.com/a/38050824/1585345). Put your machine in some Eastern timezone, Australia, India, Europe, then try `new Date(2018,0,1).getUTCFullYear()`. Do you see what you expect? – bbsimonbb Jan 31 '19 at 13:47
`new Date(2018,0,1)` gets you midnight local time. `new Date('2018-01-01')` gets you midnight in London. Confused now ? – bbsimonbb Jan 31 '19 at 13:57
@bbsimonbb>Confused now? Not really, according to the docs, when constructor is called with more than one argument it returns local date, rather than UTC. Now, as I addressed your last concern (I hope) this answer definitely deserves upvote and accept ;) – Feb 01 '19 at 07:36

score 0 · Answer 4 · answered Jan 31 '19 at 09:56

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",
});

how to display the end date with the cut off date 31-03

4 Answers4