19.移动端时间选择控件mobiscroll.js

首先,引入mobiscroll.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta2.min.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
</head>
<body>
    
</body>
</html>

然后,创建一个input,写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta2.min.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
</head>
<body>
    <input type="text" class="input-demo">
    <script>
        var currYear = (new Date()).getFullYear();
            var opt = {};
            opt.datetime = { preset: 'datetime' };
            opt.default = {
                theme: 'ios', //皮肤样式
                display: 'bottom', //显示方式 
                mode: 'scroller', //日期选择模式
                lang: 'zh',
                startYear: currYear - 80, //开始年份
                endYear: currYear + 10 //结束年份
            };
            var optDateTime = $.extend(opt['datetime'], opt['default']);
            $(".input-demo").mobiscroll(optDateTime).datetime(optDateTime);
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,174评论 0 3
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 6,485评论 0 2
  • Node.js Stream(流) Stream 是一个抽象接口,Node 中有很多对象实现了这个接口。例如,对h...
    FTOLsXD阅读 3,826评论 0 2
  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 4,631评论 0 6
  • 杨72阅读 1,189评论 0 0

友情链接更多精彩内容