How to set date in html (input type date) and javascript with conditions?-CodePudding

I am getting today's date in the pickup date column using html and js. html

<label for="inputState" class="form-label">Date</label>
<input type="date" id="PickUpDate" class="form-select">

<script>
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()   1;
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0'   dd
        }
        if (mm < 10) {
            mm = '0'   mm
        }

        PickUpDate = yyyy   '-'   mm   '-'   dd;
        document.getElementById("PickUpDate").setAttribute("min", PickUpDate);
    </script>

I want to create another field DropOffDate and take input from the user. But I want to enable dates after 2 days of pickupdate. How can I implement that using html and javascript. I am using this in a asp.net core application.

CodePudding user response：

You could assign the min attribute on date change, for example

const pickUpDate = document.getElementById('pickUpDate'),
  dropOffDate = document.getElementById('dropOffDate');

pickUpDate.onchange = function() {
  const date = this.valueAsDate;
  date.setDate(date.getDate()   2);
  dropOffDate.min = date.getFullYear().toString()   '-'   (date.getMonth()   1).toString().padStart(2, 0)   '-'   date.getDate().toString().padStart(2, 0);
};

<input type="date" id="pickUpDate" />
<input type="date" id="dropOffDate" />

CodePudding user response：

Is this the sort of thing that you were trying to implement? Set the initial state of the dropoffdate element and then assign an event listener to the pickup element - when there is a change you edit the dropoff value and attributes as per your needs.

const pad=function(i) {
    return ( parseInt(i)<10 ) ? '0'   parseInt(i) : parseInt(i);
};

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()   1;
var yyyy = today.getFullYear();




PickUpDate = yyyy   '-'   pad(mm)   '-'   pad(dd);
document.getElementById("PickUpDate").setAttribute("min", PickUpDate);

// set initial minimum date for dropoff
DropOffDate = yyyy   '-'   pad(mm)   '-'   pad( dd   2 );
document.getElementById("DropOffDate").setAttribute("min", DropOffDate);


// add event listener to the pickup - change properties & value of droppoff
// when this changes.
document.getElementById("PickUpDate").addEventListener('change',function(e){
  let dropoff=new Date( this.value );
      dropoff.setDate( dropoff.getDate()   2 );
  
  dropoff=[ dropoff.getFullYear(), pad( dropoff.getMonth()   1 ), pad( dropoff.getDate() ) ].join('-');

  let input=document.getElementById("DropOffDate");
      input.setAttribute('min', dropoff );
      input.value=dropoff;
});

label{display:block;padding:0.25rem;margin:1rem;width:50%;}
label input{float:right}

<label for="inputState" class="form-label">
  Pick-Up Date
  <input type="date" id="PickUpDate" class="form-select" />
</label>

<label for="inputState" class="form-label">
  Drop-Off Date
  <input type="date" id="DropOffDate" class="form-select" />
</label>