移动端日期选择

作者: Gaochengxin | 来源:发表于2019-05-14 13:16 被阅读0次

移动端日期选择
一款简洁的日期区间选择组件 vue-calendar-switc
vue中@change兼容问题
vue移动端设置出生日期
js插件网址
移动端微网站---选择日期（弹出层）
h5 移动端选择日期插件
自己动手丰衣足食之移动端日期选择插件（强烈推荐）【摘录】
input[date]标签在移动端使用碰到的问题
移动端如何显示日期选择器和placeholder

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>&nbsp;</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>&nbsp;</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;}
}

移动端日期选择
自己修改源的源码更加方便好用！粘贴即用，不明白的可以问我wx: xin32934 Mdate.js 是一款依托于i...
一款简洁的日期区间选择组件 vue-calendar-switc
vue-calendar-switch 移动端区间日期选择器背景市面上的日期选择插件很多，但是按照区间选择的特...
vue中@change兼容问题
@change问题 1. 需求描述需求：选择日期，当日期改变，则页面相应该日期的某些事件渲染条件：移动端vue...
vue移动端设置出生日期
使用mobiscroll是个很好用的jquery日期插件，它可以实现在移动端滚动选择日期。在vue中如何使用插件，...
js插件网址
1.jQuery内容滚动插件-BoxSlider2.jQuery artDialog对话框插件3.移动端日期选择组...
移动端微网站---选择日期（弹出层）
首先预览一下效果项目准备首先我们需要准备好下面的几个文件1.zepto.js2.zepto.mdater.js3...
h5 移动端选择日期插件
效果年效果（format: 'YYYY）年月日效果（format: 'YYYY-MM-DD）年月日 ...
自己动手丰衣足食之移动端日期选择插件（强烈推荐）【摘录】
移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，mobiscroll 太臃肿了，而且不...
input[date]标签在移动端使用碰到的问题
问题：今天一个页面中，需要让用户选择日期，准备使用input=date标签，直接触发移动端自带的datepick...
移动端如何显示日期选择器和placeholder
以前在开发pc网站时，当需要日期选择器时，都是使用第三方的，比如：my97datePicker，bootstrap...