怎么把代码添加网站,服务器租用哪家好,什么是电子商务模式,网站开发合同受托方el-date-picker 自定义指令#xff0c;输入数字显示yyyy-mm-dd格式 在main.js引入自定义指令direct.jsdirect.js公共部分时间日期控件#xff0c;表格内编辑时间控件可用 - (年-月-日)时间范围控件 - (年-月-日)日期转换主要正则年-月-日/年-月-日 时:分/年-月-日 时:分:秒年… el-date-picker 自定义指令输入数字显示yyyy-mm-dd格式 在main.js引入自定义指令direct.jsdirect.js公共部分时间日期控件表格内编辑时间控件可用 - (年-月-日)时间范围控件 - (年-月-日)日期转换主要正则年-月-日/年-月-日 时:分/年-月-日 时:分:秒年-月年-月-01/年-01-01 时间日期选择器 - (年-月-日) 在main.js引入自定义指令direct.js
import /components/common/js/direct.jsdirect.js
公共部分
注自定义指令传值时binding.value是接收值
import Vue from vue
// import $ from jquery; // 在需要使用的页面中// 日期转换正则
const convertYMDRegExp function (value) {// 判断输入的时间为几位数正则匹配相应的事件格式。可直接采用moment转换,更直接。value value.replace(/[^0-9]/g, )if (value.length 5 value.length 9) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3) // 格式化输入格式,2021-03-01} else if (value.length 9 value.length 13) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5) // 格式化输入格式,2021-03-01 09:50} else if (value.length 12) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5:$6) // 格式化输入格式,2020-03-01 09:50:30} else {return }value supplement(value)const time value value.constructor String ? value : // 转换时间格式return time
}// 补0
// 使用$匹配
function supplement(str) {// replace第一个参数正则// (?\/|-|\.|:|\b)\d{1} 用的是后顾查找 / 或者 - 或者 . 或者 : 或者 单词边界 或者 T 后面的一个数字// \d{1}(?\/|-|\.|:|\b) 用的是前瞻查找 / 或者 - 或者 . 或者 : 或者 单词边界 或者 T 前面的一个数字// replace 第二个参数0$ 匹配到的字符串前置补0// return str.replace(/(?\/|-|\.|:|\b|T)\d{1}(?\/|-|\.|:|\b|T)/g, 0$);let regExp new RegExp((?\/|-|\\.|\:|\\b|T)\\d{1}(?\/|-|\\.|\:|\\b|T), g)return str.replace(regExp, 0$);
}时间日期控件表格内编辑时间控件可用 - (年-月-日)
el-table-column proptime label时间 width140template slot-scopescopeel-date-picker v-if!!scope.row.addNew || !!scope.row.editRow :sizeelTableTreeFormSize v-modelscope.row.time typedate v-tableYMDFormat value-formatyyyy-MM-dd keypress.enter.nativesaveRow(scope.row)/el-date-pickerspan v-else{{ scope.row.time }}/span/template
/el-table-column// 第一种和时间范围控件相同
Vue.directive(tableYMDFormat, {inserted: function (el, binding, vnode) {el.addEventListener(change, () {let value $($(el).children(input)[0]).val()const time convertYMDRegExp(value);vnode.child.$emit(input, time);});}
});
// 第二种
Vue.directive(tableYMDFormat, {inserted: function (el, binding, vnode) {const { context: _this } vnodeif (_this _this._isVue) {const $this $($(el).children(input)[0])$this.on(change, function () {let value $this.val()const time convertYMDRegExp(value);vnode.child.$emit(input, time);})}}
});时间范围控件 - (年-月-日)
el-date-picker v-modelDateArr typedaterange v-daterangeYMDFormat value-formatyyyy-MM-dd range-separator至 start-placeholder开始 end-placeholder结束/el-date-pickerVue.directive(daterangeYMDFormat, {inserted: function (el, binding, vnode) {// 绑定 change 事件来更新绑定的数组el.addEventListener(change, () {let value []value[0] $($(el).children(input)[0]).val()value[1] $($(el).children(input)[1]).val()// const value [$($(el).children(input)[0]).val(), $($(el).children(input)[1]).val()]const time value.map(date convertYMDRegExp(date))vnode.child.$emit(input, time);});}
});日期转换主要正则
value value.replace(/[^0-9]/g, )年-月-日/年-月-日 时:分/年-月-日 时:分:秒
if (value.length 5 value.length 9) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3) // 年-月-日,2021-03-12
} else if (value.length 9 value.length 13) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5) // 年-月-日 时:分,2021-03-12 09:50
} else if (value.length 12) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5:$6) // 年-月-日 时:分:秒,2020-03-12 09:50:30
} else {return
}年-月
// 年-月
if (value.length 5) {value value.replace(/^(\d{4})\D*(\d{1})\D*/, $1-0$2) // 格式化输入格式,2021-03
} else if (value.length 5) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*/, $1-$2) // 格式化输入格式,2021-03
} 年-月-01/年-01-01
手动补齐01
// 年-月-01/
if (value.length 5 value.length 7) { value value 01
}
// 年-01-01
if (value.length 4) { value value 0101
} else if (value.length 4) {value value.substring(0, 4) 0101
}
value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3) // 格式化输入格式时间日期选择器 - (年-月-日) el-form-item refbirthday propbirthdayel-date-picker v-modelbirthday typedate v-dateYMDFormat value-formatyyyy-MM-dd /el-date-picker
/el-form-itemVue.directive(dateYMDFormat, {inserted: function (el, binding, vnode) {const { value: _obj } bindingconst { context: _this, data } vnodeconst { expression: key } data.modellet arr []const modelValue function (value, len) {// 判断输入的时间为几位数正则匹配相应的事件格式。可直接采用moment转换,更直接。value value.replace(/[^0-9]/g, )if (value.length 5 value.length 9) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3) // 格式化输入格式,2021-03-01} else if (value.length 9 value.length 13) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5) // 格式化输入格式,2021-03-01 09:50} else if (value.length 12) {value value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, $1-$2-$3 $4:$5:$6) // 格式化输入格式,2020-03-01 09:50:30} else {return false}value supplement(value)// const newValue value.replace(/-/g,/); // 解决前台new Dateyyyy-MM-dd转化时间相差8小时的问题,不知道靠不靠谱改用moment// const time value value.constructor String ? new Date(newValue) : value // 转换时间格式// const time value value.constructor String ? moment(value) : value // 转换时间格式// const time value // 转换时间格式const time value value.constructor String ? value : // 转换时间格式let keys key.split(.)if (arr.length len) {arr [];}arr.push(time)// 判断指令是否有传值是否有传数组的名称跟索引值原因转换出来的时间控件_this[key1][key2]取不到绑定的相关值if (!_obj) {// 处理简单的绑定if (keys keys.length 2) {const [key1, key2, key3, key4] keysif (key4) {_this[key1][key2][key3][key4] len 2 ? arr : time;} else if (key3) {_this[key1][key2][key3] len 2 ? arr : time;} else {_this[key1][key2] len 2 ? arr : time;}} else {_this[key] len 2 ? arr : time;}} else {// 处理循环中的时间控件绑定需要传值再去相应的数组中查找相应的字段赋值let objKey _obj.obj.split(.)if (objKey objKey.length 2) {// 解构赋值const [flag1, flag2, flag3, flag4] objKey;// _obj.index索引_obj.modelName绑定的字段名if (flag4) {_this[flag1][flag2][flag3][flag4][_obj.index][_obj.modelName] len 2 ? arr : time;} else if (flag3) {_this[flag1][flag2][flag3][_obj.index][_obj.modelName] len 2 ? arr : time;} else {_this[flag1][flag2][_obj.index][_obj.modelName] len 2 ? arr : time;}} else {_this[objKey][_obj.modelName] len 2 ? arr : time;}}};if (_this _this._isVue) {const $this $($(el).children(input)[0])const $this2 $($(el).children(input)[1])// 判断是范围的还是单个独立的日期时间控件范围的两个输入框都要绑定change事件if ($(el).children(input).length 1) {$this.on(change, function () {let value $this.val()modelValue(value, 2);})$this2.on(change, function () {let value $this2.val()modelValue(value, 2);})} else {$this.on(change, function () {let value $this.val()modelValue(value, 1);})}}}
})
