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 = "" + '' + '' + '

" + '

" + "";

}else{

var str = "" + '' + '' + '

" + '

" + "";

}

MdatePlugin.innerHTML = str

},

createDateYMD: function(type) {

var that = this;

var str = "

";

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 += "

" + that.dateForTen(i) + unitName + ""

}

return str + "

"

},

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

}