移动端触屏滑动日期控件

原创 已于 2025-06-27 15:24:12 修改 · 893 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #css3

于 2025-05-01 14:39:39 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端触屏滑动日期控件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        .date-picker-container {
            width: 100%;
            max-width: 400px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .date-picker-header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .date-picker-header .month-year {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .date-picker-header .selected-date {
            font-size: 28px;
            font-weight: bold;
        }
        
        .date-picker-body {
            padding: 15px;
        }
        
        .weekdays {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
            font-size: 14px;
            color: #999;
        }
        
        .weekday {
            width: 14.28%;
            text-align: center;
        }
        
        .days-container {
            position: relative;
            height: 250px;
            overflow: hidden;
        }
        
        .days {
            display: flex;
            flex-wrap: wrap;
            transition: transform 0.3s ease;
        }
        
        .day {
            width: 14.28%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
        }
        
        .day:not(.disabled):active {
            transform: scale(0.9);
        }
        
        .day.today {
            color: #2575fc;
            font-weight: bold;
        }
        
        .day.selected {
            background: #2575fc;
            color: white;
            border-radius: 50%;
        }
        
        .day.disabled {
            color: #ddd;
            pointer-events: none;
        }
        
        .footer {
            margin-top: 30px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        
        .footer a {
            color: #2575fc;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer a:hover {
            color: #6a11cb;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="date-picker-container">
        <div class="date-picker-header">
            <div class="month-year" id="month-year">2023年11月</div>
            <div class="selected-date" id="selected-date">15日</div>
        </div>
        <div class="date-picker-body">
            <div class="weekdays">
                <div class="weekday">日</div>
                <div class="weekday">一</div>
                <div class="weekday">二</div>
                <div class="weekday">三</div>
                <div class="weekday">四</div>
                <div class="weekday">五</div>
                <div class="weekday">六</div>
            </div>
            <div class="days-container">
                <div class="days" id="days"></div>
            </div>
        </div>
    </div>
    
    <div class="footer">

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentDate = new Date();
            let selectedDate = new Date();
            let touchStartX = 0;
            let touchEndX = 0;
            
            // 初始化日期选择器
            function initDatePicker() {
                updateMonthYear();
                renderCalendar();
            }
            
            // 更新月份年份显示
            function updateMonthYear() {
                const options = { year: 'numeric', month: 'long' };
                $('#month-year').text(currentDate.toLocaleDateString('zh-CN', options));
                $('#selected-date').text(selectedDate.getDate() + '日');
            }
            
            // 渲染日历
            function renderCalendar() {
                const daysContainer = $('#days');
                daysContainer.empty();
                
                const year = currentDate.getFullYear();
                const month = currentDate.getMonth();
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                const daysInMonth = lastDay.getDate();
                const startingDay = firstDay.getDay();
                
                // 上个月的最后几天
                const prevMonthLastDay = new Date(year, month, 0).getDate();
                for (let i = 0; i < startingDay; i++) {
                    daysContainer.append(`<div class="day disabled">${prevMonthLastDay - startingDay + i + 1}</div>`);
                }
                
                // 当前月的日期
                const today = new Date();
                for (let i = 1; i <= daysInMonth; i++) {
                    const dayElement = $(`<div class="day">${i}</div>`);
                    const date = new Date(year, month, i);
                    
                    // 标记今天
                    if (date.toDateString() === today.toDateString()) {
                        dayElement.addClass('today');
                    }
                    
                    // 标记已选日期
                    if (date.toDateString() === selectedDate.toDateString()) {
                        dayElement.addClass('selected');
                    }
                    
                    // 点击选择日期
                    dayElement.on('tap click', function() {
                        selectedDate = new Date(year, month, i);
                        updateMonthYear();
                        renderCalendar();
                    });
                    
                    daysContainer.append(dayElement);
                }
                
                // 下个月的前几天
                const daysToShow = 42 - (startingDay + daysInMonth);
                for (let i = 1; i <= daysToShow; i++) {
                    daysContainer.append(`<div class="day disabled">${i}</div>`);
                }
            }
            
            // 滑动切换月份
            $('.days-container').on('touchstart', function(e) {
                touchStartX = e.originalEvent.touches[0].clientX;
            });
            
            $('.days-container').on('touchend', function(e) {
                touchEndX = e.originalEvent.changedTouches[0].clientX;
                handleSwipe();
            });
            
            function handleSwipe() {
                const threshold = 50;
                const difference = touchStartX - touchEndX;
                
                if (difference > threshold) {
                    // 向左滑动 - 下个月
                    currentDate.setMonth(currentDate.getMonth() + 1);
                    initDatePicker();
                } else if (difference < -threshold) {
                    // 向右滑动 - 上个月
                    currentDate.setMonth(currentDate.getMonth() - 1);
                    initDatePicker();
                }
            }
            
            // 初始化
            initDatePicker();
        });
    </script>
</body>
</html>

ziblog
关注
移动端日期控件rolldate
weixin_43506403的博客
07-01 1567
移动端日期时间控件
js移动端日期时间选择控件
12-28
js移动端日期时间选择控件 javascript 原生js 日期选择控件
移动端日期时间选择控件
02-18
移动端日期时间选择控件
移动端日期选择插件
12-26
移动端日期选择插件mobileSelect.js，实现的日期弹出效果。
移动端日期控件
weixin_30955617的博客
05-01 477
　　 　　最近在写微信端的页面，要用到日期控件，得知其内置浏览器支持HTML5的时候，我笑了(so easy~)，<input type="date" />两秒钟搞定。然后找了三种机型，你是不是猜到了已经？！没错，Android，iPhone，winphone，，，奇葩的winphone内置浏览器竟然是IE。醉了，疯狂搜索，找到一篇博客mobiscroll，照着敲下来都达不到人家的效...
移动端年、月、周、日时间选择器（基于Vant+Vue3）
weixin_44217374的博客
12-04 6015
开发移动app项目时，需要选择年、月、周、日下面的具体时间范围，比如年：xxxx年01月01日至xxxx年12月31日；月：当前年加上选择的月份的日期范围；周：当前年的某一周的时间范围；日期：当前年+当前月份+选择的日期；于是封装了个组件,用的是vant组件库。先安装组件库依赖npm i vant。
jQuery移动端触屏滑动日期控件(mobiscroll时间控件)Demo
05-09
**jQuery 移动端触屏滑动日期控件——Mobiscroll 时间控件** Mobiscroll 是一个高效、响应式的JavaScript库，专为移动设备设计，同时也兼容桌面浏览器。它提供了一套完整的日期和时间选择器，使得在网页应用中添加...
精选资源
jQuery移动端触屏滑动日期控件特效代码
03-20
【jQuery移动端触屏滑动日期控件特效代码】是一个专为移动设备设计的交互式日期选择器，它基于流行的jQuery库以及一个名为Mobiscroll的插件。在移动应用或网页中，用户可以通过手指滑动来选取日期，提供了一种直观且...
jQuery结合Mobiscroll插件实现的移动端触屏滑动日期控件效果源码.zip
11-18
本资源“jQuery结合Mobiscroll插件实现的移动端触屏滑动日期控件效果源码.zip”正是为此目的而设计的。该压缩包包含了一个基于jQuery的解决方案，利用了流行的Mobiscroll插件，它提供了流畅且触摸友好的日期滚动功能...
jQuery移动端触屏滑动日期控件.zip
07-04
"jQuery移动端触屏滑动日期控件"正是这样一种工具，它利用了jQuery库和Mobiscroll插件，为移动应用或网站提供了高效、易用的日期选择功能。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画...
jQuery移动端触屏滑动日期控件
07-15
针对移动端的交互需求，jQuery移动端触屏滑动日期控件应运而生，它允许用户通过手指滑动来选择日期，提供了一种直观且高效的日期选择体验。 该控件主要基于jQuery Mobile或jQuery UI等框架构建，它将日期选择器转化...
jquery日期插件DateTime Picker(支持移动端)
08-07
DateTime Picker是一个基于jQuery的时间选择插件,支持web和移动。用户可以使用+ / -按钮或改变数值或直接到文本框中直接输入. 演示地址：http://www.jq22.com/jquery-info516
移动端日期插件
12-06
移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，在此向大家分享一款手机端的日期选择插件
datePicker:一个适合移动端的日期选择插件，支持选择时间
05-17
datePicker 描述 一个适合移动端的日期选择插件，支持ios,andriod,PC端主流浏览器 DEMO 依赖(由于iscroll5下滑动反弹太严重，换成iscroll4) jquery 1.9+或者Zepto,iscroll4 使用： 引入插件脚本和样式后,使用类似：$(&#39;#date&#39;).datePicker(opt); opt参数 beginyear 开始年份(默认2010开始) endyear 结束年份（默认到2020） days 数组，默认[&#39;周日&#39;,&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;] beginhour 开始的小时 endhour 结束的小时 beginminute 开始的分钟 endminute 结束的分钟 curdate 布尔值,若为true,插件初始化时始终指向当前时间，若为false，初始化时指向input的value值,默认为false
漂亮的移动端日期选择插件 mdatetimer
01-07
漂亮的移动端日期选择插件：http://blog.youkuaiyun.com/libin_1/article/details/50400941
【亲测免费】 LCalendar：一款优秀的移动端日期时间选择控件
最新发布
gitblog_00868的博客
01-12 562
LCalendar 是一个开源的移动端日期时间选择控件，采用纯原生 JavaScript 编写，不依赖任何第三方库。该项目的主要编程语言为 JavaScript，同时也包含 CSS 和 HTML。 ## 核心功能 LCalendar 提供了以下核心功能： - 支持日期、日期时间、时间以及年月的选择。 - 可以自定义最小日期和最大日期。 - 支持自定义主题样式。 - 界面简洁，操作流畅。 - ...
移动端日期小插件
兰亭古墨
11-06 607
layDate 日期与时间组件 获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构） 存放到你项目的任意目录，使用时，只需引入 laydate.js 即可。 下面是一个入门示例： 使用 layDate 独立版 //执行一个laydate实例 laydate.render({ elem: '#test1' //指
移动端触屏滑动日期控件的实现源码
#### 实现移动端触屏滑动日期控件效果 1. **集成Mobiscroll与jQuery**： - 将下载好的Mobiscroll库文件引入到HTML文件中。 - 在JavaScript文件中引入jQuery库文件。 - 在HTML元素中使用特定的类名和数据属性设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值