Adding 1 day to selected date in datepicker-CodePudding

I'm trying to disable previous dates in End Datepicker.For Example if Selected date is 10-06-2021,the End date must be 11-06-2021. I need to disable all dates before 11-06 in End datepicker. Please help me to resolve this.

<input type="date" name="datepickers" id="create-smeeting-startdate" />
<input type="date" name="datepickers" id="create-smeeting-enddate" />

var date = new Date(meetingStratdate);
date.setDate(date.getDate()   1);
$('#create-smeeting-enddate')[0].valueAsDate = date;
$("#create-smeeting-enddate").attr("option", "minDate", date);
$('#create-smeeting-enddate').change();

CodePudding user response：

You need to do something along these lines:

$("#create-smeeting-startdate").datepicker({
    // options
}).on("change", function() {
    $("#create-smeeting-enddate").val("").datepicker("option", "minDate", $(this).datepicker("getDate"));
});
$("#create-smeeting-enddate").datepicker({
    // options
});

Basically you handle the change event on first datepicker to set the minDate of second datepicker.

CodePudding user response：

You will have to set "minDate" property to the datepicker.

In your case:

  $("#create-smeeting-startdate").datepicker({
    minDate: 1
  });

CodePudding user response：

I think this is a perfect solution for your problem

var meetingStartDateInput = document.querySelector('#create-smeeting-startdate');
var meetingEndDateInput = document.querySelector('#create-smeeting-enddate');

meetingStartDateInput.addEventListener('change', function(){
    if(this.value != '') setEndDate(this.value);
});

    
function setEndDate(meetingDate){
    let date = new Date(meetingDate);
    // adding 1 day to meeting date
    date = new Date(date.setDate(date.getDate()   1));

    // This function add 0 before number if number is less than 10
    // * This function is important if you want to show date on html date picker
    function formatNum(num) {
        if(num < 10) return `0${num}`
        return num;
    }

    // change date format to "year-month-day" format to set on date picker value
    let newFormatedDate = `${date.getFullYear()}-${formatNum(date.getMonth() 1)}-${formatNum(date.getDate())}`;

    meetingEndDateInput.value = newFormatedDate;
    meetingEndDateInput.setAttribute('min', newFormatedDate);
}

<div>Meeting date</div>
<input type="date" name="datepickers" id="create-smeeting-startdate" />
<div>Meeting End date </div>
<input type="date" name="datepickers" id="create-smeeting-enddate" />