vue小荔枝，时间控件，动态按月份增减。

Posted 2020-09-29 webSong

1. 依赖框架有jq，bootstrap3.0，vue2.0;
2. 自封装（搬运）时间控件，bootstrap-datetimepicker。资源下载：看这里

• 需求：
• 默认本地时间，相隔一个月
• 四个选项：1一个月，一个季度，半年，一年。
• 如果结束日期不变，那么默认递增即可，如果结束日期改变了，以变更的日期递增月份。

html结构：

<div id="app">
        <div class="col-md-5 form-inline">
            <div class="form-group">
                <input type="text" class="form-control"  id="datetimepicker">--
                <input type="text" class="form-control"  id="dateEnd">
            </div>

            <div id="tool">
                <label>
                    <input type="radio" name="date" checked  @click="dateSet(1)">间隔一个月
                </label>
                <label>
                    <input type="radio" name="date"  @click="dateSet(4)">间隔四个月
                </label>
                <label >
                    <input type="radio" name="date" @click="dateSet(6)">间隔六个月
                </label>
                <label>
                    <input type="radio" name="date"  @click="dateSet(12)">间隔12个月
                </label>
            </div>
        </div>
    </div>

　　时间插件：

//首先在date原型上扩展一个自定义时间解析方法
Date.prototype.Format_ = function(fmt) {
    var o = {
        "M+" : this.getMonth()+1,                 //月份
        "d+" : this.getDate(),                    //日
        "h+" : this.getHours(),                   //小时
        "m+" : this.getMinutes(),                 //分
        "s+" : this.getSeconds(),                 //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S"  : this.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt)) {
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt;
};
//然后new两个date出来分别是当月和上个月
var begin=new Date();
var end=new Date();
new Date(begin.setMonth((new Date().getMonth()-1)));//-1就是前一个月；+1就是下一个月
var begintime= begin.Format_("yyyy-MM-dd");
var endtime=end.Format_("yyyy-MM-dd");

　　vue-逻辑代码

 new Vue({
        el:"#app",
        data:{
            b:begintime,
            e:endtime
        },
        methods:{
            dateSet:function (num) {
                var thas=this,cacheEnd=thas.e,thisEnd=$(\'#dateEnd\').val();
                var begin=new Date();
                var end=new Date();
                if(cacheEnd==thisEnd){
                    new Date(begin.setMonth((new Date().getMonth()-num)));//-1就是前一个月；+1就是下一个月
                    var begintime= begin.Format_("yyyy-MM-dd");
                    $(\'#datetimepicker\').val(begintime);
                    console.log(\'相同\')
                }else {
                    var d = new Date(thisEnd.replace(/-/g,"/"));
                    d.setMonth(d.getMonth()- num);
                    var str = d.getFullYear()+"-"+(d.getMonth()>=9?d.getMonth()+1:"0"+(d.getMonth()+1))+"-"+(d.getDate()>9?d.getDate():"0"+d.getDate());
                    $("#datetimepicker").val(str);
                    console.log(\'不同\')
                }
            },

        }
    });

　　初始化时间容器

//time时间插件
    $(\'#datetimepicker\').datetimepicker({
        minView: "month", //很关键，如果不限制到月视图，它默认是到小时的。
        todayHighlight:true,
        language:\'zh-CN\',
        format:\'yyyy-mm-dd\',
        autoclose: true,
    }).val(begintime);

    $(\'#dateEnd\').datetimepicker({
        minView: "month",
        todayHighlight:true,
        language:\'zh-CN\',
        format:\'yyyy-mm-dd\',
        autoclose: true,
    }).val(endtime);

　　ps:在搬运代码这条路上，我会一直走下去。