image.png
自己修改源的源码更加方便好用！粘贴即用，不明白的可以问我wx: xin32934
Mdate.js
是一款依托于iScroll.js的日期选择小型插件，可滑动选择年、月、日，只适用于移动端。
操作简易，只需要在页面中引入iScroll.js和Mdate.js即可。
使用说明
new Mdate("dateShowBtn", {
//"dateShowBtn"为你点击触发Mdate的id，必填项
acceptId: "dateSelectorTwo",
//此项为你要显示选择后的日期的input，不填写默认为上一行的"dateShowBtn"
beginYear:'',
//此项为Mdate的初始年份，不填写默认为当前及以前的日期
beginMonth: '',
//此项为Mdate的初始月份，不填写默认为当前及以前的日期
beginDay: "",
//此项为Mdate的初始日期，不填写默认为当前及以前的日期
endYear: "",
//此项为Mdate的结束年份，不填写默认为当年
endMonth: "",
//此项为Mdate的结束月份，不填写默认为当月
endDay: "",
//此项为Mdate的结束日期，不填写默认为当天
format: "yyyy-mm",
//此项为Mdate需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日
success:function(e){//点击确定按钮回调
alert(e)//弹出选择的时间
}
})
Mdate.js修改之的源后代码
(function() {
var d = document;
var dateopts = {
beginYear: 2000,
beginMonth: 1,
beginDay: 1,
endYear: new Date().getFullYear(),
endMonth: new Date().getMonth() + 1,
endDay: new Date().getDate(),
format: "YMD"
};
var MdSelectId = "";
var MdAcceptId = "";
var dateContentBox = "";
var datePlugs = "";
var yearTag = "";
var monthTag = "";
var dayTag = "";
var indexY = 1;
var indexM = 1;
var indexD = 1;
var initM = null;
var initD = null;
var yearScroll = null;
var monthScroll = null;
var dayScroll = null;
var Mdate = function(el, opts) {
if(!opts) {
opts = {}
}
this.id = el;
this.selectorId = d.getElementById(this.id);
this.acceptId = d.getElementById(opts.acceptId) || d.getElementById(this.id);
this.beginYear = opts.beginYear || dateopts.beginYear;
this.beginMonth = opts.beginMonth || dateopts.beginMonth;
this.beginDay = opts.beginDay || dateopts.beginDay;
this.endYear = opts.endYear || dateopts.endYear;
this.endMonth = opts.endMonth || dateopts.endMonth;
this.endDay = opts.endDay || dateopts.endDay;
this.format = opts.format || dateopts.format;
this.success= opts.success;
this.dateBoxShow()
};
Mdate.prototype = {
constructor: Mdate,
dateBoxShow: function() {
var that = this;
that.selectorId.onclick = function() {
that.createDateBox();
that.dateSure()
}
},
createDateBox: function() {
var that = this;
MdatePlugin = d.getElementById("MdatePlugin");
if(!MdatePlugin) {
dateContentBox = d.createElement("div");
dateContentBox.id = "MdatePlugin";
d.body.appendChild(dateContentBox);
MdatePlugin = d.getElementById("MdatePlugin")
}
MdatePlugin.setAttribute("class", "slideIn");
that.createDateUi();
var yearUl = d.getElementById("yearUl");
var monthUl = d.getElementById("monthUl");
var dayUl = d.getElementById("dayUl");
yearUl.innerHTML = that.createDateYMD("year");
that.initScroll();
that.refreshScroll()
},
createDateUi: function() {
var that=this;
if(that.format=='yyyy-mm'){
var str = "" + '<section class="getDateBg"></section>' + '<section class="getDateBox" id="getDateBox">' + '<div class="choiceDateTitle">' + '<button id="dateCancel">取消</button>' + '<button id="dateSure" class="fr">确定</button>' + "</div>" + '<div class="dateContent">' + '<div class="checkeDate"></div>' + '<div id="yearwrapper">' + '<ul id="yearUl"></ul>' + "</div>" + '<div id="monthwrapper">' + '<ul id="monthUl"></ul>' + "</div>" + '<div id="daywrapper" style="opacity:0">' + '<ul id="dayUl"></ul>' + "</div>" + "</div>" + "</section>";
}else{
var str = "" + '<section class="getDateBg"></section>' + '<section class="getDateBox" id="getDateBox">' + '<div class="choiceDateTitle">' + '<button id="dateCancel">取消</button>' + '<button id="dateSure" class="fr">确定</button>' + "</div>" + '<div class="dateContent">' + '<div class="checkeDate"></div>' + '<div id="yearwrapper">' + '<ul id="yearUl"></ul>' + "</div>" + '<div id="monthwrapper">' + '<ul id="monthUl"></ul>' + "</div>" + '<div id="daywrapper">' + '<ul id="dayUl"></ul>' + "</div>" + "</div>" + "</section>";
}
MdatePlugin.innerHTML = str
},
createDateYMD: function(type) {
var that = this;
var str = "<li> </li>";
var beginNum = null,
endNum = null,
unitName = "年",
dataStyle = "data-year";
if(type == "year") {
beginNum = that.beginYear;
endNum = that.endYear
}
if(type == "month") {
unitName = "月";
dataStyle = "data-month";
beginNum = that.beginMonth;
endNum = 12;
if(yearTag != that.beginYear) {
beginNum = 1
}
if(yearTag == dateopts.endYear) {
endNum = that.endMonth
}
}
if(type == "day") {
unitName = "日";
dataStyle = "data-day";
beginNum = 1;
endNum = new Date(yearTag, monthTag, 0).getDate();
if(yearTag == that.beginYear && monthTag == that.beginMonth) {
beginNum = that.beginDay
}
if(yearTag == that.endYear && monthTag == that.endMonth) {
endNum = that.endDay
}
}
for(var i = beginNum; i <= endNum; i++) {
str += "<li " + dataStyle + "=" + i + ">" + that.dateForTen(i) + unitName + "</li>"
}
return str + "<li> </li>"
},
initScroll: function() {
var that = this;
yearScroll = new iScroll("yearwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function() {
indexY = Math.ceil(this.y / 40 * -1 + 1);
yearTag = yearUl.getElementsByTagName("li")[indexY].getAttribute("data-year");
monthUl.innerHTML = that.createDateYMD("month");
monthScroll.refresh();
try {
monthTag = monthUl.getElementsByTagName("li")[indexM].getAttribute("data-month")
} catch(err) {
return true
}
dayUl.innerHTML = that.createDateYMD("day");
dayScroll.refresh();
try {
dayTag = dayUl.getElementsByTagName("li")[indexD].getAttribute("data-day")
} catch(err) {
return true
}
}
});
monthScroll = new iScroll("monthwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function() {
indexM = Math.ceil(this.y / 40 * -1 + 1);
if(indexM == 1 && yearTag != that.beginYear) {
monthTag = 1
} else {
monthTag = monthUl.getElementsByTagName("li")[indexM].getAttribute("data-month")
}
dayUl.innerHTML = that.createDateYMD("day");
dayScroll.refresh();
try {
dayTag = dayUl.getElementsByTagName("li")[indexD].getAttribute("data-day")
} catch(err) {
return true
}
}
});
dayScroll = new iScroll("daywrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function() {
indexD = Math.ceil(this.y / 40 * -1 + 1);
if(indexD == 1 && monthTag != that.beginMonth) {
dayTag = 1
} else {
dayTag = dayUl.getElementsByTagName("li")[indexD].getAttribute("data-day")
}
}
})
},
refreshScroll: function() {
var that = this;
var inputYear = that.acceptId.getAttribute("data-year");
var inputMonth = that.acceptId.getAttribute("data-month");
var inputDay = that.acceptId.getAttribute("data-day");
inputYear =inputYear ||new Date().getFullYear();
inputMonth = inputMonth ||new Date().getMonth()+1;
inputDay = inputDay || new Date().getDate();
initM = that.beginMonth;
initD = that.beginDay;
if(inputYear != that.beginYear && initM != 1) {
initM = 1
}
if(inputMonth != that.beginMonth && initD != 1) {
initD = 1
}
inputYear -= that.beginYear;
inputMonth -= initM;
inputDay -= initD;
yearScroll.refresh();
yearScroll.scrollTo(0, inputYear * 40, 300, true);
monthScroll.scrollTo(0, inputMonth * 40, 300, true);
dayScroll.scrollTo(0, inputDay * 40, 300, true)
},
dateSure: function() {
var that = this;
var sureBtn = d.getElementById("dateSure");
var cancelBtn = d.getElementById("dateCancel");
sureBtn.onclick = function() {
if(that.format == "YMD") {
that.acceptId.value = yearTag + "年" + monthTag + "月" + dayTag + "日"
}else if(that.format=='yyyy-mm'){
that.acceptId.value = yearTag + '-' + that.dateForTen(monthTag)
}else {
that.acceptId.value = yearTag + that.format + that.dateForTen(monthTag) + that.format + that.dateForTen(dayTag)
}
that.acceptId.setAttribute("data-year", yearTag);
that.acceptId.setAttribute("data-month", monthTag);
that.acceptId.setAttribute("data-day", dayTag);
that.dateCancel()
that.success(that.acceptId.value)
};
cancelBtn.onclick = function() {
that.dateCancel()
}
},
dateForTen: function(n) {
if(n < 10) {
return "0" + n
} else {
return n
}
},
dateCancel: function() {
MdatePlugin.setAttribute("class", "slideOut");
setTimeout(function() {
MdatePlugin.innerHTML = ""
}, 400)
},
};
if(typeof exports !== "undefined") {
exports.Mdate = Mdate
} else {
window.Mdate = Mdate
}
})();
Mdate.css文件
html, body{padding: 0; margin: 0; border: 0; vertical-align:
baseline; font-size: 15px; color: #333; }
*,
*:before,
*:after{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Microsoft Yahei", "Helvetica Neue", Arial, Helvetica,
sans-serif;
word-break: break-all;
}
*:focus { outline: none; }
.fl{float: left;}
.fr{float: right;}
/*选择日期*/
.getDateBg{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: fixed;
left: 0;
top: 0;
z-index: 100;
transition: opacity 0.4s;
opacity: 0;
}
.getDateBox{
width: 100%;
position: fixed;
left: 0;
background-color: #fff;
box-shadow: -5px 0 5px rgba(0,0,0,0.3);
z-index: 101;
transition: bottom 0.4s;
bottom: -270px;
}
.slideIn{
display: block !important;
}
.slideIn .getDateBox{
animation: slideIn 0.4s;
-webkit-animation: slideIn 0.4s;
bottom: 0;
}
.slideOut .getDateBox{
animation: slideOut 0.4s;
-webkit-animation: slideOut 0.4s;
bottom: -400px;
}
.slideIn .getDateBg{
opacity: 1;
}
.slideOut .getDateBg{
opacity: 0;
}
.getDateBox .choiceDateTitle{
height: 2.933rem;
background-color: #f2f2f2;
}
.getDateBox .choiceDateTitle button{
height: 100%;
padding: 0 1.333rem;
color: #00c599;
font-size: 1.0rem;
background: none;
border: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0.2)
}
.getDateBox .dateContent{
width: 100%;
margin: 3.0rem 0;
height: 120px;
overflow: hidden;
position: relative;
}
.getDateBox .dateContent:before{
content: "";
width: 100%;
height: 40px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
position: absolute;
left: 0;
top: 0;
z-index: 10;
pointer-events: none;
}
.getDateBox .dateContent:after{
content: "";
width: 100%;
height: 40px;
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1), rgba(255,255,255,0));
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
pointer-events: none;
}
.getDateBox .dateContent .checkeDate{
width: 100%;
height: 40px;
position: absolute;
left: 0;
top: 40px;
}
.getDateBox .dateContent .checkeDate:before,
.getDateBox .dateContent .checkeDate:after{
content: "";
width: 100%;
height: 1px;
background-color: #ccc;
position: absolute;
left: 0;
top: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
.getDateBox .dateContent .checkeDate:after{
top: auto;
bottom: 0;
}
#yearwrapper,
#monthwrapper,
#daywrapper{
width: 33.3%;
height: 100%;
position: absolute;
top: 0;
}
#yearwrapper{
left: 0;
}
#daywrapper{
right: 0;
}
#monthwrapper{
left: 33.3%;
}
#yearwrapper ul{
margin-left: 40%;
}
#daywrapper ul{
margin-right: 40%;
}
#yearwrapper ul li,
#monthwrapper ul li,
#daywrapper ul li{
height: 40px;
line-height: 40px;
font-size: 0.933rem;
text-align: center;
list-style: none;
}
@keyframes slideIn{
0%{bottom: -270px;}
100%{bottom: 0;}
}
@-webkit-keyframes slideIn{
0%{bottom: -270px;}
100%{bottom: 0;}
}
@keyframes slideOut{
0%{bottom: 0;}
100%{bottom: -270px;}
}
@-webkit-keyframes slideOut{
0%{bottom: 0;}
100%{bottom: -270px;}
}
网友评论