jQuery如何基于两个datepicker输入的日期区间输出所有日期列表

你现有代码已经可以正确获取起止日期的Date对象，只需要新增逐天遍历的逻辑，将日期格式化为要求的样式后拼接输出即可，修改方案如下：

HTML代码调整 #

新增结果输出容器，用来存放生成的日期列表：

<input type="text" id="firstDate" name="firstDate"/>
<input type="text" id="secondDate" name="secondDate"/>
<div id="dateResult"></div>

jQuery代码修改 #

// 统一日期选择器格式为日-月-年，和你示例的输入格式匹配
$("#firstDate").datepicker({
    dateFormat: "dd-mm-yy"
}); 
$("#secondDate").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function () {
        myfunc();
    }
}); 

function myfunc(){
    const start = $("#firstDate").datepicker("getDate");
    const end = $("#secondDate").datepicker("getDate");
    // 非法输入直接清空结果
    if (!start || !end || end < start) {
        $("#dateResult").html("");
        return;
    }

    let resultHtml = "";
    let currentDate = new Date(start);
    // 循环遍历区间内所有日期
    while (currentDate <= end) {
        // 直接使用原生API格式化日期为「日 月份全称 年」格式，无需手动维护月份列表
        const formatDate = currentDate.toLocaleDateString('en-GB', {
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        });
        resultHtml += `<p>${formatDate}</p>\n`;
        // 日期自动加1天，自动处理跨月、跨年逻辑
        currentDate.setDate(currentDate.getDate() + 1);
    }
    // 输出结果到页面
    $("#dateResult").html(resultHtml);
    // 如果需要直接拿到生成的HTML代码，可打印resultHtml变量查看
}

效果验证 #

选择开始日期25-06-2021、结束日期28-06-2021时，输出结果完全符合要求：

<p>25 June 2021</p>
<p>26 June 2021</p>
<p>27 June 2021</p>
<p>28 June 2021</p>

内容的提问来源于stack exchange，提问作者DIR