Disabling the dates according to previous date selection

Question

I'm new to JavaScript. So please don't go harsh on me.

After the StartDate gets selected, the ExpectedEndDate and the EndDate must start with StartDate + 1 day and end in 6 months. Other dates must be disabled in the ExpectedEndDate and EndDate.

Here the futureInput.Max works fine. But the futureInput.Min doesn't work. I couldn't find where it went wrong.

$(document).ready(()=>{

                var startInput = $('#StartDate')[0];
                var expectedEndInput = $('#ExpectedEndDate')[0];
                var endInput = $('#EndDate')[0];

                startInput.addEventListener('change', (evt)=>{
                    
                    var EndTime = new Date($("#StartDate").val());
                    var dd = String(EndTime.getDate() + 1);
                    var mm = String(EndTime.getMonth() + 6);
                    var yyyy = EndTime.getFullYear();

                    var MaxTime = yyyy + '-' + mm + '-' + dd;

                    var StartTime = new Date($("#StartDate").val());
                    var dd = String(StartTime.getDate() + 1);
                    var mm = String(StartTime.getMonth() + 1);
                    var yyyy = StartTime.getFullYear();

                    var MinTime = yyyy + '-' + mm + '-' + dd;

                    debugger
                    [expectedEndInput, endInput].forEach((futureInput)=> {
                    futureInput.min = MinTime;
                    futureInput.max = MaxTime;
                    debugger
                    })
                    
                })
            })

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>



<input type="date" id="StartDate" />
<input type="date" id="ExpectedEndDate" />
<input type="date" id="EndDate" />

score 1 · Accepted Answer · answered Jun 14 '22 at 09:04

In order to react to every change of the <input id="StartDate">, we need to set a change event listener for it.

function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
}

function millisecondsToDateString(milliseconds) {
    // to convert Date to yyyy-mm-dd use Swedish locale
    return new Date(milliseconds).toLocaleDateString('sv-SE');
}

$(document).ready(()=>{

  var startInput = $('#StartDate')[0];
  var expectedEndInput = $('#ExpectedEndDate')[0];
  var endInput = $('#EndDate')[0];
  
  startInput.addEventListener('change', (evt)=>{
    // called every time the startInput's date value changes
  
    // get start date as milliseconds since 1970 New Year
    var startTime = startInput.valueAsNumber;
    
    // startDate + 1 day
    var minTime = startTime + daysToMilliseconds(1);
    // startDate + 180 days (6 months)
    var maxTime = startTime + daysToMilliseconds(30 * 6);
    
    [expectedEndInput,endInput].forEach((futureInput)=> {
      futureInput.min = millisecondsToDateString(minTime);
      futureInput.max = millisecondsToDateString(maxTime);
    });
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="StartDate" />
<input type="date" id="ExpectedEndDate" />
<input type="date" id="EndDate" />

Refer to this SO answer for conversion of Date objects to yyyy-mm-dd. Only values of yyyy-mm-dd are accepted for input date min & max.

Disabling the dates according to previous date selection

1 Answers1