Mdate.js 超精简的移动端时间选择插件-BFW插件库

Mdate.js 超精简的移动端时间选择插件

Mdate.js 超精简的移动端时间选择器插件

第一步引入bfwone 加载依赖项iscroll

第二步执行插件代码

代码：new Mdate("dateSelectorOne");
"dateSelectorOne"为你要显示选择后的日期的input，必填项;
Mdate的默认开始日期为：2000年1月1日，可自定义
Mdate的默认结束日期为：今天，可自定义
Mdate的默认日期格式为：xxxx年xx月xx日，可自定义

new Mdate("dateShowBtn", {
//"dateShowBtn"为你点击触发Mdate的id，必填项
acceptId: "dateSelectorTwo",
//此项为你要显示选择后的日期的input，不填写默认为上一行的"dateShowBtn"
beginYear: "2002",
//此项为Mdate的初始年份，不填写默认为2000
beginMonth: "10",
//此项为Mdate的初始月份，不填写默认为1
beginDay: "24",
//此项为Mdate的初始日期，不填写默认为1
endYear: "2017",
//此项为Mdate的结束年份，不填写默认为当年
endMonth: "1",
//此项为Mdate的结束月份，不填写默认为当月
endDay: "1",
//此项为Mdate的结束日期，不填写默认为当天
format: "-"
//此项为Mdate需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日
})

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|iscroll&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["Mdate", "Mdate"], function() {
                new Mdate("dateSelectorOne");
                new Mdate("dateShowBtn", {
                    acceptId: "dateSelectorTwo",
                    beginYear: "2002",
                    beginMonth: "10",
                    beginDay: "24",
                    endYear: "2017",
                    endMonth: "1",
                    endDay: "1",
                    format: "-"
                })


            });
        });
    </script>
    <style type="text/css">
        html,
        body {
            font-size: 14px;
        }

        body {
            background-image: url(bg.png);
            background-size: 100vw 100vh;
            background-attachment: fixed;
            padding: 20px;
        }

        .demoBox {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 8px 8px 20px;
        }

        .demoBox >p {
            padding-top: 10px;
        }

        .demoBox >ol {
            padding-top: 15px;
            border-top: 1px dashed rgba(255, 255, 255, 0.3);
        }

        .demoBox >ol>li {
            padding-top: 10px;
            margin-left: 7%;
        }

        .demoBox >ol>li>span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            display: block;
        }

        .demo {
            height: 35px;
            margin: 15px 0;
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
        }

        .demo >input {
            display: block;
            border: 0;
            border-radius: 3px;
            padding: 0 8px;
            height: 100%;
            flex: 1;
            -webkit-flex: 1;
            -moz-flex: 1;
            font-size: 14px;
        }

        .demo >button {
            background-color: #00c599;
            color: #fff;
            border: 0;
            height: 100%;
            margin-left: 8px;
            padding: 0 15px;
            border-radius: 3px;
            font-size: 14px;
        }
    </style>
</head>
<body style="background:white;">
    <div class="demoBox">
        <p>
            Mdate.js 是一款依托于iScroll.js的日期选择小型插件，可滑动选择年、月、日，只适用于移动端。
        </p>
        <p>
            操作简易，只需要在页面中引入iScroll.js和Mdate.js即可。
        </p>
    </div>
    <div class="demoBox">
        <p>
            案例1：默认项
        </p>
        <div class="demo">
            <input type="text" id="dateSelectorOne" placeholder="选择日期">
        </div>
        <ol>
            <p>
                使用说明
            </p>
            <li>代码：new Mdate("dateSelectorOne");</li>
            <li>"dateSelectorOne"为你要显示选择后的日期的input，必填项;</li>
            <li>Mdate的默认开始日期为：2000年1月1日，可自定义</li>
            <li>Mdate的默认结束日期为：今天，可自定义</li>
            <li>Mdate的默认日期格式为：xxxx年xx月xx日，可自定义</li>
        </ol>
    </div>
    <div class="demoBox">
        <p>
            案例2：自定义项
        </p>
        <div class="demo">
            <input type="text" id="dateSelectorTwo" placeholder="请填写：xxxx-xx-xx">
            <button type="button" id="dateShowBtn">选择日期</button>
        </div>
        <ol>
            <p>
                使用说明
            </p>
            <li>
                new Mdate("dateShowBtn", { <span>//"dateShowBtn"为你点击触发Mdate的id，必填项</span>
                <br /> acceptId: "dateSelectorTwo", <span>//此项为你要显示选择后的日期的input，不填写默认为上一行的"dateShowBtn"</span>
                <br /> beginYear: "2002",<span>//此项为Mdate的初始年份，不填写默认为2000</span>
                <br /> beginMonth: "10",<span>//此项为Mdate的初始月份，不填写默认为1</span>
                <br /> beginDay: "24",<span>//此项为Mdate的初始日期，不填写默认为1</span>
                <br /> endYear: "2017",<span>//此项为Mdate的结束年份，不填写默认为当年</span>
                <br /> endMonth: "1",<span>//此项为Mdate的结束月份，不填写默认为当月</span>
                <br /> endDay: "1",<span>//此项为Mdate的结束日期，不填写默认为当天</span>
                <br /> format: "-"<span>//此项为Mdate需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日</span>
                <br /> })
            </li>
        </ol>
    </div>
</body>
</html>

Mdate.js 超精简的移动端时间选择插件

网友评论0

colpick.js

jcdate.js

laydate.js

PCASClass.js

distpicker.js

mPicker.js

calendar.js

jquery.range.js

Mdate.js

dateRange.js