【问题标题】:Select date 2 days from today only仅选择从今天起 2 天后的日期
【发布时间】:2020-12-01 07:50:47
【问题描述】:

我想使用日期选择器显示日期。需要获取今天的日期并在选择组件中显示接下来的 2 天日期。

这可以使用 JavaScript 和 jQuery 吗?

我找到了一个类似的帖子,但我希望它出现在日期选择器上: Get Today date & next 2 days - display in select option

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

【问题讨论】:

    标签: javascript jquery date calendar


    【解决方案1】:

    像这样?

    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>

    【讨论】:

    • 非常感谢,我的问题有更新了 :)
    【解决方案2】:

    是的,您可以使用 javascript 和 jquery 创建。 检查小提琴https://jsfiddle.net/s7nrfeqL/

    html代码

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

    javascript + jquery 代码

    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());
            }
    
         });
    })
    

    只创建用户需要选择的日期。不要创建 31 天并禁用不需要的天数,由于客户端代码,用户仍然可以选择禁用的天数。

    【讨论】:

    • 非常感谢,我的问题有更新了 :)
    • 如果你使用 jquery datepicker,你可以将范围限制在接下来的两天
    • 我在这里找到了日期选择器:jqueryui.com/datepicker,但没有类似的功能可以编辑:stackoverflow.com/questions/45406389/… 我希望将类似的功能放在输入日期选择器上:
    • 你在寻找这样的东西吗jsfiddle.net/v6krtmq9
    • 差不多 :) 格式应该是 并且日期应该从接下来的 2 天开始,即 12 月 3 日。
    猜你喜欢
    • 1970-01-01
    • 2023-04-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多