script code to restrict Date value picker to specific range-CodePudding

I need your help, I'm trying to prevent my customers from picking date more than 10 days in the future.

I've tried the following code which works correctly during the month if the rest days of the current month are more than 10 days, but now it doesn't work, because we are in 22th of January so the code doesn't work,

var today = new Date();
var future = new Date();
var dd = today.getDate();
var mm = today.getMonth()   1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
  dd = '0'   dd
}
if (mm < 10) {
  mm = '0'   mm
}

today = yyyy   '-'   mm   '-'   dd;
var ndd = dd   10;
future = yyyy   '-'   mm   '-'   ndd;
document.getElementById("bdate").setAttribute("min", today);
document.getElementById("bdate").setAttribute("max", future);

<div  dir="rtl" style="text-align:right">
  <label for="bdate" style="font-size:20px;">تاريخ الدفع<span>*</span></label>
  <input dir="ltr" style="text-align:center" id="bdate" type="date" name="entry.624495733" placeholder="اضغط للاختيار" required/>
  <i ></i>
</div>

CodePudding user response：

Your

var ndd = dd 10;

makes 2210 today because you are concatenating to a strings.

You need to use two dates or reuse one date for both dates

const today = new Date();
const todayString = today.toISOString().split('T')[0]
const future = new Date(); 
future.setDate(future.getDate() 10);
const futureString = future.toISOString().split('T')[0]
console.log(todayString,futureString)
document.getElementById("bdate").setAttribute("min", todayString);
document.getElementById("bdate").setAttribute("max", futureString);

<div  dir="rtl" style="text-align:right">
  <label for="bdate" style="font-size:20px;">تاريخ الدفع<span>*</span></label>
  <input dir="ltr" style="text-align:center" id="bdate" type="date" name="entry.624495733" placeholder="اضغط للاختيار" required/>
  <i ></i>
</div>