手机版日期插件mobiscroll

最新推荐文章于 2024-04-12 11:04:42 发布

weixin_37610189

最新推荐文章于 2024-04-12 11:04:42 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_37610189/article/details/59104069

本文介绍如何在网页中集成Mobiscroll日期选择器，包括引入CSS和JS文件、设置HTML元素及JavaScript配置选项等步骤。适用于希望快速实现日期选择功能的前端开发者。

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

1.引入css

<link rel="stylesheet" href="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/css/mobiscroll.css" charset="UTF-8"/>
<link rel="stylesheet" href="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/css/mobiscroll-2.13.2.full.min.css" charset="UTF-8"/>

2.引入js

注意引入js顺序

<script src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/js/zepto.min.js"></script>
<script src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/js/jquery.js"></script>    
<script src="{:Substr(U('/', '', true, false, true), 0, -1)}__PUBLIC__/js/mobiscroll-2.13.2.full.min.js" charset="UTF-8" type="text/javascript">  </script>

3.html

<input  class="USER_AGE" type="text"  placeholder="法人身份证号有效期">

4.html中js

$(function(){
var currYear = (new Date()).getFullYear();
                    var opt = {};
                    opt.date = { preset: 'date' };
                    opt.datetime = { preset: 'datetime' };
                    opt.time = { preset: 'time' };
                    opt.default = {
                        theme: 'android-holo-light', //皮肤样式
                        display: 'modal', //显示方式
                        mode: 'scroller', //日期选择模式
                        dateFormat: 'yyyy-mm-dd',
                        lang: 'zh',
                        showNow: true,
                        nowText: "今天",
                        startYear: 2013, //开始年份
                        endYear: 2099 //结束年份
                    };

                    $(".USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));  
})

5.效果图