移动端滑动选择日期范围功能实现

Finn

发布时间：2026-10-13| 5人浏览过

原创

在移动端网页开发中，为了提升用户体验，常使用滑块（Slider）代替传统的日期输入框来选择相对时间跨度。本文介绍如何使用 JavaScript 和 jQuery 实现一个从当前位置向前滑动选择若干天的功能。

核心原理

该功能的核心在于监听触摸事件的移动位置，将其转换为具体的“天数”偏移量。计算公式为：Timevalue = Math.round(最大天数 * (当前滑动距离 / 滑块总宽度))。获取偏移量后，基于系统当前时间进行累加计算，并将结果同步到隐藏的 input 或显示区域。

完整实现步骤

第1步：构建 HTML 骨架

需要创建滑块的轨道（Track）和可拖拽的滑块（Thumb），以及用于显示天数范围和最终日期的元素。

<div class="clList">
    <span class="cl-15 pull-left">3天</span>
    <!-- 滑动区域容器 -->
    <div id="touchMoveTime" class="jzrqDiv cl-70 pull-left">
        <div id="scroll_Track"></div>
        <!-- 拖动图标/按钮 -->
        <div class="spirit icon" id="scroll_Thumb">&#xe669;</div>
    </div>
    <span class="cl-15 pull-left text-right" id="touchRight">30天</span>
</div>

其中 #endTime 通常是一个隐藏的 input 框，用于存储计算后的标准日期字符串，供表单提交使用。

第2步：设置 CSS 布局与样式

确保轨道和滑块在容器内正确定位，并美化外观。

.jzrqDiv {
    position: relative;
    top: 15px;
    height: 10px;
    border-radius: 20px;
    background: #efefef;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
#scroll_Track {
    position: absolute;
    top: 0;
    height: 10px;
    border-radius: 20px;
    background: #2399dc;
    z-index: 10;
    width: 0; /* 初始宽度 */
}
.spirit {
    position: absolute;
    top: -9px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    border-radius: 50%;
    color: #ddd;
    background: #fff;
    z-index: 11;
    transform: translate(0, 0);
}

第3步：初始化滑块状态

页面加载时，根据默认参数（最小值3天，最大值30天）将滑块定位到初始位置，并预填相应的日期。

function scrollBarInit() {
    var defaultValue = 3, maxValue = 30;
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    
    // 获取本月天数
    var day = new Date(year, month, 0);
    var daycount = day.getDate();
    
    // 模拟增加天数计算逻辑
    if ((date + defaultValue) > daycount) {
        if (month == 12) {
            month = 1;
            year = year + 1;
        } else {
            month = month + 1;
        }
        date = (date + defaultValue) - daycount;
    } else {
        date = date + defaultValue;
    }
    
    // 补零处理
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;

    // 更新输入框值
    $("#endTime").attr('value', year + '-' + month + '-' + date);
    
    // 初始绘制滑块位置（对应 default value 3）
    // 假设 track 宽度完全覆盖 touchMoveTime，且比例线性的
    var currentX = $("#touchMoveTime").width() * (defaultValue / maxValue);
    $('#scroll_Track').css({width: currentX + "px"});
    $('#scroll_Thumb').css({transform: 'translate(' + currentX + 'px, 0)'});
};

第4步：绑定触摸移动事件

使用 touchmove 事件获取手指坐标，限制拖动范围，并在拖动过程中实时更新界面和数据。

// 绑定事件
$(page).on('touchmove', '#touchMoveTime', function(event) {
    touchMove(event);
});

function touchMove(event) {
    event.preventDefault(); // 防止滚动页面
    if (!$('#scroll_Thumb') || !event.touches.length) return;
    
    var defaultValue = 3, maxValue = 30;
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    
    // 获取位置信息
    var startOffset = parseInt($('#touchMoveTime').offset().left);
    var endOffset = parseInt($('#touchRight').offset().left);
    var _limit = endOffset - startOffset;
    var touchMoveTimeOffsetLeft = $('#scroll_Track').offset().left;
    
    var touch = event.touches[0];
    var endX = touch.pageX;
    var currentX = endX - touchMoveTimeOffsetLeft;
    
    // 计算当前选中的天数
    var Timevalue = Math.round(maxValue * (currentX / $("#touchMoveTime").width()));
    
    // 限制范围在 3 ~ 30 之间
    if (Timevalue < defaultValue) Timevalue = defaultValue;
    else if (Timevalue > maxValue) Timevalue = maxValue;
    
    // 更新 UI
    if (currentX < _limit && currentX > 15) {
        $('#days').text(Timevalue);
        $('#scroll_Track').css({width: currentX + "px"});
        
        // 计算 Thumb 的实际位移（考虑 Thumb 自身半宽）
        var tran_currentX = (currentX < 20) ? 0 : currentX - 20;
        $('#scroll_Thumb').css({transform: 'translate(' + tran_currentX + 'px, 0)'});
    }
    
    // 重新计算日期
    var day = new Date(year, month, 0);
    var daycount = day.getDate();
    
    if ((date + Timevalue) > daycount) {
        if (month == 12) {
            month = 1;
            year = year + 1;
        } else {
            month = month + 1;
        }
        date = (date + Timevalue) - daycount;
    } else {
        date = date + Timevalue;
    }
    
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    
    $('#endTime').attr('value', year + '-' + month + '-' + date);
}

注意事项

依赖库： 示例使用了 jQuery 语法（如 $(), .css()），实际使用时请引入 jQuery 库。
兼容性： 该方案主要面向移动端（Touch 事件），若需兼容 PC 端鼠标拖拽，建议补充 mousedown/mousemove/mouseup 事件或改用成熟的 Slider 插件。
边界处理： 代码已包含跨月、跨年及月末天数不同的处理逻辑，可直接复用。

以上就是JavaScript实现移动端滑动选择日期功能的详细内容，更多关于JavaScript移动端滑动效果的资料请关注本站其它相关文章！