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



117 466 156



特效描述:Mdate.js 手机年月日 选择日期插件,Mdate.js 是一款基于iScroll.js的小型日期选择插件,可鼠标滑动选择年、月、日,只适用于移动端。 使用说明: 1、 代码:new Mdate("dateSelectorOne"); 2、 "dateSelectorOne"为你要显示选择后的日期的input,必填项; 3、Mdate的默认开始日期为:2000年1月1日,可自定义; 4、 Mdate的默认结束日期为:今天,可自定义; 5、 Mdate的默认日期格式为:xxxx年xx月xx日,可自定义;

代码结构

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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 日期时间 时钟 日历 时间 日历插件 时间日期插件 提示框/弹出层 时间日期插件 时间日期 文字滚动 文字无缝滚动 文字间歇滚动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到