Select 日期仅从今天起 2 天

Question

I want to display date using a date picker. Need to get the today's date and display next 2 days date in select component.

Is this possible using JavaScript and jQuery?

I found a similar post but I want it to be on a date picker: Get Today date & next 2 days - display in select option

<input type="date" id="" value="">

Answer 1

Like this?

 const date = new Date(2020,10,28,15,0,0,0); // today, remove the numbers inside when happy document.getElementById("today").innerHTML = `Let's say today is ${date.toLocaleString()}` date.setDate(date.getDate()+2); let day = date.getDate(); const lastDay = new Date(date.getFullYear(), date.getMonth()+1,0,15,0,0,0).getDate(); const sel = document.getElementById("day"); sel.options[sel.options.length] = new Option(day,day) day = day+1>lastDay? 1: day+1 sel.options[sel.options.length] = new Option(day,day)

 <span id="today"></span><br/> <select class="select day" id="day"> <option value="" selected="selected">DD</option> </select>

Answer 2

yes you can create using javascript and jquery. check fiddle https://jsfiddle.net/s7nrfeqL/

html code

Select Date: <input type="date" id="datepicker"/><br>
    <select id="selectDay" class="select day">
</select>

javascript + jquery code

document.addEventListener('DOMContentLoaded', (event) => {
    $( "#datepicker" ).on("change",function(){
        var dateRange = document.getElementById('selectDay'),
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", 
        "Sep", "Oct", "Nov", "Dec"];
        $(dateRange).empty();

        for(var day = 1; day < 3; day++) {
          var date = new Date($( "#datepicker" ).val());
          date.setDate(date.getDate() + day);
          dateRange.options[dateRange.options.length] = new 
          Option([date.getDate(), monthNames[date.getMonth()], 
          date.getFullYear()].join(' '), date.toISOString());
        }

     });
})

create only the day which user need to select. Dont create 31 days and disable not needed days still user can select the disabled days due to client side code.