Web滑动日期选择器（仿iOS）

最新推荐文章于 2025-03-13 11:35:32 发布

Monster-L

最新推荐文章于 2025-03-13 11:35:32 发布

阅读量1.7w

点赞数 11

分类专栏： web 文章标签： web datepicker 日期选择器移动web

本文链接：https://blog.youkuaiyun.com/u013085697/article/details/51050424

版权

web 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一款针对移动Web端的时间选择控件，解决了iOS与Android平台上的UI不一致问题，通过使用mobiscroll库实现了良好的用户体验，并提供了具体实现代码及示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datepicker.mobile

简介

移动web端统一使用体验，在ios上通过select标签滑轮的效果很赞，但是android不同版本表现各异，为了统一UI与使用体验，使用开源库mobiscroll封装了一个自己的时间选择控件（mobiscroll库的使用文档不多，自己使用时也遇到很多坑），实现js比较简单，大家可以看看，然后定制出自己的时间选择器。

日期选择demo github项目地址

demo预览

默认主题

蓝色主题

如何使用？

demo/index.html中样例所示，引入如下js

    <script type="text/javascript" src="./js/util.js"></script>
    <script type="text/javascript" src="./js/date.js"></script>

util.js工具类，date.js主要操作js

date.js中一些日期操作展依赖util.js

创建date

/**
 * 初始化传入参数说明
 * 
 * @param  {[date]}      [设置日期]
 * @param  {[theme]}     [主题设置：目前白蓝两种主题，默认白色主题]
 * @param  {[onSelect]}  [日期选中后回调函数 参数date为选中日期]
 */
date.init(
    {
        date : '2016-01-07',
        theme : 'blue',
        onSelect : function(date){
        console.log(date);
    }}
);

配置参数

{
    date : '2016-01-07',//传入初始化日期
    theme : 'blue',//目前白蓝两种主题，默认白色主题
    onSelect : function(date){
        console.log(date);//日期选中后回调函数 参数date为选中日期
    }
}