dates minimum and maximum, onchange event listener not working correctly for to date-CodePudding

I am trying to apply the minimum and maximun for two dates inputs, namely:

<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />


<script type="text/javascript">
  var proposal_from = document.getElementById("proposal_from");
  var proposal_to = document.getElementById("proposal_to");


  function setFromDate() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth()   1).padStart(2, '0');
    var minY = today.getFullYear();
    var maxY = today.getFullYear()   1;

    var minimum = minY   '-'   mm   '-'   dd;
    var maximum = maxY   '-'   mm   '-'   dd;

    proposal_from.min = minimum;
    proposal_from.max = maximum;
  }

  setFromDate();

  proposal_from.addEventListener("change", function(){
            var date = proposal_from.value.split("-");
            var from_dd = date[2];
            var from_mm = date[1];
            var from_Y = date[0];
            
            from_dd  ;
            var min_to_dd;
            if(from_dd < 9){
                min_to_dd = "0"   from_dd;
            } else { 
                min_to_dd = from_dd;
            }
            var min_to_mm = from_mm;
            var min_to_Y = from_Y;
            
            from_Y  ;
            var max_to_dd;
            if(from_dd < 9){
                max_to_dd = "0"   from_dd;
            } else { 
                max_to_dd = from_dd;
            }
            
            var max_to_mm = from_mm;
            var max_to_Y = from_Y;
            
            var minimum = min_to_Y   '-'   min_to_mm   '-'   min_to_dd;
            var maximum = max_to_Y   '-'   max_to_mm   '-'   max_to_dd;
            console.log(minimum);
            console.log(maximum);
            
            proposal_to.min = minimum;
            proposal_to.max = maximum;
        });
</script>

the event listener seems working now, the minimum and maximun dates get set as the date printed in the console should be and date values are completely correct. Before it was or example if I choose date 2021-10-04 I get minimum 2021-10-5 and 2022-10-5 instead of 2021-10-05 and 2022-10-05, is there anyway to do this with .padStart()?

CodePudding user response：

You have to use the same logic that you used to pad zeros in setFromDate in your change event aswell.

Why this is needed?

You are performing incremental operation on from_dd using from_dd this will convert its type from String to Number. So convert it back to string again and perform you number padding logic.

function setFromDate() {
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth()   1).padStart(2, '0');
  var minY = today.getFullYear();
  var maxY = today.getFullYear()   1;

  var minimum = minY   '-'   mm   '-'   dd;
  var maximum = maxY   '-'   mm   '-'   dd;
  console.log(minimum)
  proposal_from.min = minimum;
  proposal_from.max = maximum;
}

setFromDate();

proposal_from.addEventListener("change", function () {
  var date = proposal_from.value.split("-");
  var from_dd = date[2];
  var from_mm = date[1];
  var from_Y = date[0];

  from_dd  ;
  var min_to_dd = String(from_dd).padStart(2, '0')
  var min_to_mm = from_mm;
  var min_to_Y = from_Y;

  from_Y  ;
  var max_to_dd = String(from_dd).padStart(2, '0')
  var max_to_mm = from_mm;
  var max_to_Y = from_Y;

  var minimum = min_to_Y   '-'   min_to_mm   '-'   min_to_dd;
  var maximum = max_to_Y   '-'   max_to_mm   '-'   max_to_dd;

  proposal_to.min = minimum;
  proposal_to.max = maximum;
});

<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />