How do I display the end date 31-03- year(depending upon the start

How do I display the end date 31-03- year(depending upon the start_date)?

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

My year range is

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

Now according to the current year, we are in the range of 2018-2019.

So my end date will be the 31-03-2019.

How do I display the end date 31-03- year(depending upon the start_date)?

Should I need some jquery or PHP to handle this?

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

Would you help me out in this?

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

Why not maxDate: new Date(year + 1, 03, 31)

– Twisty
Jan 19 at 21:03

add a comment |

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

My year range is

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

Now according to the current year, we are in the range of 2018-2019.

So my end date will be the 31-03-2019.

How do I display the end date 31-03- year(depending upon the start_date)?

Should I need some jquery or PHP to handle this?

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

Would you help me out in this?

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

Why not maxDate: new Date(year + 1, 03, 31)

– Twisty
Jan 19 at 21:03

add a comment |

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

My year range is

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

Now according to the current year, we are in the range of 2018-2019.

So my end date will be the 31-03-2019.

How do I display the end date 31-03- year(depending upon the start_date)?

Should I need some jquery or PHP to handle this?

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

Would you help me out in this?

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

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

My year range is

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

Now according to the current year, we are in the range of 2018-2019.

So my end date will be the 31-03-2019.

How do I display the end date 31-03- year(depending upon the start_date)?

Should I need some jquery or PHP to handle this?

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

Would you help me out in this?

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

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

php jquery jquery-ui datepicker

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

edited Jan 19 at 13:54

asked Jan 19 at 9:08

user9437856

428212

asked Jan 19 at 9:08

user9437856

428212

asked Jan 19 at 9:08

user9437856

428212

Why not maxDate: new Date(year + 1, 03, 31)

– Twisty
Jan 19 at 21:03

add a comment |

Why not maxDate: new Date(year + 1, 03, 31)

– Twisty
Jan 19 at 21:03

Why not maxDate: new Date(year + 1, 03, 31)

– Twisty
Jan 19 at 21:03

add a comment |

1 Answer
1

active

oldest

votes

You can, using onSelect option, set the maxDate in the .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>

Since we get the date in string, we can use $.datepicker.parseDate() to parse it into a Date and increment the year into a new Date.

Hope that helps.

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

|
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54265576%2fhow-do-i-display-the-end-date-31-03-yeardepending-upon-the-start-date%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can, using onSelect option, set the maxDate in the .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>

Since we get the date in string, we can use $.datepicker.parseDate() to parse it into a Date and increment the year into a new Date.

Hope that helps.

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

|
show 3 more comments

You can, using onSelect option, set the maxDate in the .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>

Since we get the date in string, we can use $.datepicker.parseDate() to parse it into a Date and increment the year into a new Date.

Hope that helps.

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

|
show 3 more comments

You can, using onSelect option, set the maxDate in the .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>

Since we get the date in string, we can use $.datepicker.parseDate() to parse it into a Date and increment the year into a new Date.

Hope that helps.

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

You can, using onSelect option, set the maxDate in the .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>

Since we get the date in string, we can use $.datepicker.parseDate() to parse it into a Date and increment the year into a new Date.

Hope that helps.

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

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

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

edited Jan 20 at 8:26

answered Jan 19 at 22:06

Twisty

13.9k11534

answered Jan 19 at 22:06

Twisty

13.9k11534

answered Jan 19 at 22:06

Twisty

13.9k11534

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

|
show 3 more comments

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

Thanks for the answer, Can you share the output because I checked your snippet but not getting the expected output.

– user9437856
Jan 20 at 4:41

@user9437856 corrected and updated code.

– Twisty
Jan 20 at 8:29

Give me some time to check.

– user9437856
Jan 20 at 9:05

My last two scenarios is working the only issue with the first one. if the start date is 21-01-2019 then end date should not exceed the 31-03-2019.

– user9437856
Jan 21 at 10:45

@user9437856 I am unable to determine what the three scenarios are and what dates should results in specific ranges. You have 2018 - 2019 and 2019 - 2020, but it's not clear where the cut over is. Do you mean 01-01-2018 to 31-12-2018? Please clarify.

– Twisty
Jan 21 at 20:09

|
show 3 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku