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