Mdate.js手机年月日选择日期插件

代码结构

1. 引入JS

<script src="Mdate/iScroll.js"></script>
<script src="Mdate/Mdate.js"></script>

2. HTML代码

    <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>
    <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>