首页 > 技术文章 > 封装 自定义的JS插件 高逼格

jiangxiuhui-love-duxiuling 2018-07-14 17:06 原文

boostrp datepicker 插件 根据时间的变动 关联修改   简单适用

年 ___  月___        开始时间__   结束时间___   

两组关联 级联变动    封装的js 插件

直接上代码:

初始化插件:

// 初始化 添加html 中对应 4个时间的input id
// 年 月 添加change 方法 changeTime()
var plugin = new PickerCascade({
    datepickerBeginDate: 'datepickerBeginDate',
    datepickerEndDate: 'datepickerEndDate',
    datepickerYear: 'datepickerYear',
    datepickerMonth: 'datepickerMonth'
});
 $('.date-picker').datepicker().on('changeDate',gotoDate);

 

function gotoDate(ev){
   plugin._gotoDate(ev);
}

 

function changeTime(){
   plugin._changeTime();
}

  

 封装的js插件代码:

/***
*author: xiuhuiJiang
*Date:   2018年7月12日17:00:41 
*/ //undefined 防止出现undefined 问题 ;(function(undefined) { "use strict" var _global; // 构造方法 初始化 setting function extend(o,n,override) { for(var key in n){ if(n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)){ o[key]=n[key]; } } return o; }; // 插件构造函数 - 返回数组结构 function PickerCascade(opt){ this._initial(opt); }; PickerCascade.prototype = { constructor: this, _initial: function(opt) { // 默认参数 和 初始化 暴露的内部方法 var def = { datepickerBeginDate: '', datepickerEndDate: '', datepickerYear: '', datepickerMonth: '', beginTime:'', endTime:'', interval:'', number:'', date:'', beginDate:'', endDate:'', ev:{}, _gotoDate : PickerCascade.prototype._gotoDate(this.ev), _changeTime:PickerCascade.prototype._changeTime(), _updateSele:PickerCascade.prototype._updateSele(this.beginTime,this.endTime), _diffMonth:PickerCascade.prototype._diffMonth(this.beginTime,this.endTime), _getIntervalMonth:PickerCascade.prototype._getIntervalMonth(this.beginDate,this.endDate), _dateAdd:PickerCascade.prototype._dateAdd(this.interval,this.number,this.date), }; this.def = extend(def,opt,true); //配置参数 }, _gotoDate : function (ev){ if(JSON.stringify(ev)=='{}'||typeof ev === "undefined"){ return false; } $("input[name = '"+ev.target.name+"']").val(ev.format()); var endTime = $("#"+this.def.datepickerEndDate).val(); if(typeof endTime === "undefined"||endTime == ''){ return false; } var beginTime = $("#"+this.def.datepickerBeginDate).val(); if(typeof beginTime === "undefined"||beginTime == ''){ return false; } this._updateSele(beginTime,endTime); }, _changeTime: function (){ if(typeof this.def === "undefined") return false; var beginTime = $("#"+this.def.datepickerBeginDate).val(); if(typeof beginTime === "undefined"||beginTime == ''){ return false; } var BeginDate = new Date(beginTime.replace(/-/g,"/")); var year = $("#"+this.def.datepickerYear).val(); var month = $("#"+this.def.datepickerMonth).val(); if(typeof year === "undefined"||year == ''){ year = 0; } if(typeof month === "undefined"||month == ''){ month = 0; } var endDate = this._dateAdd('month',parseInt(month),BeginDate); endDate = this._dateAdd('year',parseInt(year),endDate); $("#"+this.def.datepickerEndDate).val(endDate.getFullYear()+'-'+(endDate.getMonth()+1)+'-'+endDate.getDate()); }, _updateSele: function (beginTime,endTime){ if(typeof beginTime === "undefined"||typeof endTime === "undefined"){ return false; } var intervalMonth = this._diffMonth(beginTime,endTime); $("#"+this.def.datepickerYear).val(parseInt(intervalMonth/12)); $("#"+this.def.datepickerMonth).val(parseInt(intervalMonth%12)); }, _diffMonth: function (beginTime,endTime){ if(typeof beginTime === "undefined"||typeof endTime === "undefined"){ return false; } //计算时间差 年份 和 月份 beginTime = beginTime.replace(/-/g,"/"); endTime = endTime.replace(/-/g,"/"); //相差的总月份 return this._getIntervalMonth(new Date(beginTime) , new Date(endTime) ); }, _getIntervalMonth: function(beginDate,endDate){ if(typeof beginDate === "undefined"||typeof endDate === "undefined"||JSON.stringify(endDate)=='null'||endDate=='') return false; return (endDate.getFullYear()*12 + endDate.getMonth()) - (beginDate.getFullYear()*12 + beginDate.getMonth()); }, _dateAdd: function(interval, number, date) { if(typeof interval === "undefined"||typeof number === "undefined"){ return false; } if (typeof date === 'string') { date = new Date(date.replace(/-/g, "/")); } switch (interval) { case "year": { date.setFullYear(date.getFullYear() + number); break; } case "quar": { date.setMonth(date.getMonth() + number * 3); break; } case "month": { date.setMonth(date.getMonth() + number); break; } case "week": { date.setDate(date.getDate() + number * 7); break; } case "day": { date.setDate(date.getDate() + number); break; } case "hour": { date.setHours(date.getHours() + number); break; } case "minute": { date.setMinutes(date.getMinutes() + number); break; } case "second": { date.setSeconds(date.getSeconds() + number); break; } default: { date.setDate(date.getDate() + number); break; } } return date; } } // 将插件对象暴露给全局对象(考虑兼容性) _global = (function(){ return this || (0, eval)('this'); }()); if (typeof module !== "undefined" && module.exports) { module.exports = PickerCascade; } else if (typeof define === "function" && define.amd) { define(function(){return PickerCascade;}); } else { !('PickerCascade' in _global) && (_global.PickerCascade = PickerCascade); } }());

推荐阅读