M站 滚动日历弹框

时间：2023-03-08 22:50:13
M站 滚动日历弹框

先放张效果图：

M站 滚动日历弹框

完整Demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>测试</title>

    <link href="../JScripts/MobileDate/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css"/>

    <link href="../JScripts/MobileDate/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />

    <link href="../JScripts/MobileDate/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css"/>

    <!-- jQuery Include -->

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>

    <script src="../JScripts/MobileDate/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

    <script type="text/javascript">

        function  BindMobDate(obj) {

            //显示日历框，调用前，需要引入库文件

            var currYear = (new Date()).getFullYear();

            var opt={};

            opt.date = {preset : 'date'};

            opt.datetime = {preset : 'datetime'};

            opt.time = {preset : 'time'};

            opt.default = {

                theme: 'android-ics light', //皮肤样式

                display: 'modal', //显示方式

                mode: 'scroller', //日期选择模式

                lang:'zh',

                startYear:currYear - 70, //开始年份

                endYear:currYear + 0 //结束年份

            };

            $(obj).val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));

        }

        $(function() {

            //调用一次即可

            BindMobDate($("#btn1"));

        });

    </script>

</head>

<body>

    出生日期：<input type="text" id="btn1"  value=""/>

</body>

</html>

滚动日历弹框完整Demo

说明：

需要用到插件mobiscroll.datetime-2.5.1.js  下载地址：滚动日历弹框插件

相关文章