1

I have 2 dates fromDate and ToDate in which I want to implement a logic where if in

FromDate is selected todays date, in ToDate the date should be active or enabled till previous 90 days or 3 months. Also max date in both textbox should be current date

Here is the code which I tried

$(function() {
  $("#fromDate").datepicker({ //
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    maxDate: "+90y",
    defaultDate: null
  }).datepicker("setDate", new Date());
  
  $("#toDate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    defaultDate: null,
    maxDate: 0,
    onSelect: function() {
      //$('#fromDate').datepicker('option', 'minDate', $("#toDate").datepicker("getDate"));
    }
  }).datepicker("setDate", new Date());
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>


<input id="fromDate" type="text" value="16/02/2024">
<input id="toDate" type="text" value="16/02/2024">

3
  • 1
    @freedomn-m: this datepicker jqueryui.com/datepicker
    – hud
    Commented Feb 16 at 9:33
  • ok, but that is not what the actual issue. I want to set it for 3 months max from the date of selection
    – hud
    Commented Feb 16 at 9:41
  • @freedomn-m: ok, so how it can be done to set that user can select the date to previous 3 months date from current date ?
    – hud
    Commented Feb 16 at 9:43

1 Answer 1

1

Based on the wording in the requirements and the attempted code:

limit from date to be 90 days before to date when to date is changed

The attempt was very close, just need to subtract the days, eg using this answer

    onSelect: function() {
        let d = $("#toDate").datepicker("getDate");
      d.setDate(d.getDate() - 90);
      $('#fromDate').datepicker('option', 'minDate', d);
    }

Updated snippet, using 3 days so it's easier to test:

$(function() {
  $("#fromDate").datepicker({ //
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    maxDate: "+0",
    defaultDate: null
  }).datepicker("setDate", new Date());
  
  $("#toDate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    defaultDate: null,
    maxDate: 0,
    onSelect: function() {
        let d = $("#toDate").datepicker("getDate");
      d.setDate(d.getDate() - 3);
      $('#fromDate').datepicker('option', 'minDate', d);
    }
  }).datepicker("setDate", new Date());
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>


<input id="fromDate" type="text" value="16/02/2024">
<input id="toDate" type="text" value="16/02/2024">

4
  • yes its working for 3 days, how can I get it for 90 days ?
    – hud
    Commented Feb 16 at 9:51
  • You could change the 3 to 90
    – fdomn-m
    Commented Feb 16 at 9:52
  • I want to remove default date set on both the textbox how can I achieve it ?
    – hud
    Commented Feb 21 at 10:43
  • ?? Remove .datepicker("setDate", new Date())? It would be best if you knew what each line of code does when you write/copy it.
    – fdomn-m
    Commented Feb 21 at 12:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.