vue小荔枝，時間控件，動態按月份增減。

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:在搬運代碼這條路上，我會一直走下去。