Mdate.js手機年月日選擇日期插件



121 481 161



特效描述: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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表