如何使用HTML/CSS/JS创建支持日期时间显示的范围滑块

核心修改逻辑是替换原代码中调用toDateString()的日期输出逻辑，自定义格式化方法生成你需要的YYYY-MM-DD-HH:mm:ss格式，同时根据需要的时间选择精度调整滑块步长即可。 #

关键修改项 #

• 移除所有toDateString()调用，该方法默认返回带星期、月份英文缩写的日期字符串，不符合格式要求
• 新增自定义时间格式化函数，对年、月、日、时、分、秒做个位数补零处理后，拼接为目标格式
• 原代码step参数默认值为86400（对应1天的秒数），如果需要按小时/分钟/秒粒度选择，将该值改为对应秒数即可：按小时选设为3600，按分钟选设为60，按秒选设为1
• 滑块的最小、最大、默认选中值均支持传入带时分秒的Date对象，可根据业务需求自行调整

完整可运行代码 #

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<p>
    <label for="amount">时间范围:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
</p>
<div id="slider-range"></div>

<script>
// 时间格式化工具：将时间戳转为 YYYY-MM-DD-HH:mm:ss 格式
function formatTime(ts) {
    const d = new Date(ts);
    const addZero = num => String(num).padStart(2, '0');
    return `${d.getFullYear()}-${addZero(d.getMonth()+1)}-${addZero(d.getDate())}-${addZero(d.getHours())}:${addZero(d.getMinutes())}:${addZero(d.getSeconds())}`;
}

$(function () {
    $("#slider-range").slider({
        range: true,
        min: new Date('2022-10-01 00:00:00').getTime() / 1000,
        max: new Date('2022-10-31 23:59:59').getTime() / 1000,
        step: 3600, // 此处步长设为1小时，可按需调整
        values: [new Date('2022-10-01 12:00:00').getTime() / 1000, new Date('2022-10-15 12:00:00').getTime() / 1000],
        slide: function (event, ui) {
            $("#amount").val(`${formatTime(ui.values[0]*1000)} - ${formatTime(ui.values[1]*1000)}`);
        }
    });
    // 初始化默认展示值
    $("#amount").val(`${formatTime($("#slider-range").slider("values", 0)*1000)} - ${formatTime($("#slider-range").slider("values", 1)*1000)}`);
});
</script>

效果说明 #

代码运行后滑块选中值会直接输出类似2022-10-01-12:00:00 - 2022-10-15-12:00:00的结果，完全匹配要求的格式。如果只需要按天选择，把step改回86400即可，格式化函数会自动返回对应日期的时间值。

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