怎么做网站的图片,建设网站费用入会计分录,如何制作虚拟网站,泸州 网站建设1.需求场景
业务中需要#xff0c;日期选择框方便客户对日期的选择#xff08;比如近5天#xff0c;本周#xff0c;本月#xff0c;本年等等#xff09;#xff0c;并按小时展示。
2.组件代码MyDateTimeChange.vue
templateel-date-pickerv-model…1.需求场景
业务中需要日期选择框方便客户对日期的选择比如近5天本周本月本年等等并按小时展示。
2.组件代码MyDateTimeChange.vue
templateel-date-pickerv-modelinternalValue:default-time[00:00:00, 23:59:59]sizesmall:style{width:width,height:height}typedatetimerangerange-separator-:start-placeholder$t(datepicker.startDate):end-placeholder$t(datepicker.endDate):picker-optionspickerOptions:value-formatcustomFormat:formatformat:clearableclearablechangedateChanged/el-date-picker
/templatescriptexport default {name: MyDateChange,props: {width: {type: String,default: },height:{type:String,default:41px},customFormat:{type:String,default: yyyy-MM-dd},value:{type:Array,},format:{type:String,default: yyyy-MM-dd},clearable: {type: Boolean,default: false},},data() {const _this thisreturn {pickerOptions: {shortcuts: [{text: this.$t(datepicker.today),onClick(picker) {const start _this.getFirstTime(new Date());const end _this.getEndTime(new Date());//start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, [start, end]);}},{text: this.$t(datepicker.thisWeek),onClick: (picker) {const start _this.getFirstTime(this.getStartOfWeek());const end _this.getEndTime(new Date());//start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, [start, end]);}}, {text: this.$t(datepicker.thisMonth),onClick: (picker) {const start _this.getFirstTime(this.getStartOfMonth());const end _this.getEndTime(new Date());//start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, [start, end]);}},{text: this.$t(datepicker.thisYear),onClick: (picker) {const start _this.getFirstTime(this.getFirstDayOfYear());const end _this.getEndTime(new Date());//start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit(pick, [start, end]);}},{text: this.$t(datepicker.recentSeven),onClick(picker) {const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);_this.getFirstTime(start);const end _this.getEndTime(new Date());picker.$emit(pick, [start, end]);}},{text: this.$t(datepicker.recentFifteen),onClick(picker) {const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);_this.getFirstTime(start);const end _this.getEndTime(new Date());picker.$emit(pick, [start, end]);}},{text: this.$t(datepicker.recentThirty),onClick(picker) {const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);_this.getFirstTime(start);const end _this.getEndTime(new Date());picker.$emit(pick, [start, end]);}}]},dateRange: ,submitButtonLoading: false,internalValue:this.value};},watch:{value: {handler(val) {this.$set(this,internalValue,val);return val}}},methods: {getFirstTime(day){day.setHours(0);day.setMinutes(0);day.setSeconds(0);day.setMilliseconds(0);return day;},getEndTime(day){day.setHours(23);day.setMinutes(59);day.setSeconds(59);day.setMilliseconds(999);return day;},getStartOfWeek() {let today new Date();let day today.getDay(); // 获取今天是星期几 (0 是周日1 是周一以此类推)let startOfWeek new Date(today); // 复制今天的日期// 将日期设置为本周的第一天 (星期日)startOfWeek.setDate(today.getDate() - day);return startOfWeek;},getStartOfMonth() {const today new Date();const year today.getFullYear();const month today.getMonth(); // 获取当前月份注意月份是从 0 开始的0 表示一月// 设置日期为本月的第一天const firstDay new Date(year, month, 1);return firstDay;},getFirstDayOfYear() {const today new Date();const year today.getFullYear();// 设置日期为今年的第一天const firstDayOfYear new Date(year, 0, 1); // 月份从0开始0表示一月return firstDayOfYear;},dateChanged(newDate) {this.internalValue newDate; // 更新内部数据this.$emit(input, newDate); // 触发父组件的更新}},};/script
style langcss
/*去掉了选择日期时间页面的分和秒*/
.el-time-spinner__wrapper{width: 100% !important;
}
.el-scrollbar:nth-of-type(2){display: none;
}
/*去掉了选择日期时间页面的清空按钮*/
.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text {display: none;
}
/style3.使用
import MyDateTimeChange from /components/xxx/MyDateTimeChange;......
el-form-item :label$t(OpenapiLogStatistics.time)my-date-time-change v-modeldateRange formatyyyy-MM-dd HH custom-formatyyyy-MM-dd HH:mm:ss width340px height32px/my-date-time-change/el-form-item
......data() {return {dateRange: [getNowFormatDate(-) 00:00:00,getNowFormatDate(-) 23:59:59],}
}......
// 添加日期范围
export function addDateRange(params, dateRange, propName) {let search params;search.params typeof (search.params) object search.params ! null !Array.isArray(search.params) ? search.params : {};dateRange Array.isArray(dateRange) ? dateRange : [];if (typeof (propName) undefined) {search.params[beginTime] dateRange[0];search.params[endTime] dateRange[1];} else {search.params[begin propName] dateRange[0];search.params[end propName] dateRange[1];}return search;
}/*** 默认生成日期格式 yyyyMMdd* param seperator1 分隔符* returns 返回日期字符串*/
export function getNowFormatDate(seperator1) {seperator1 seperator1||let date new Date();let year date.getFullYear();let month date.getMonth() 1;let strDate date.getDate();if (month 1 month 9) {month 0 month;}if (strDate 0 strDate 9) {strDate 0 strDate;}return year seperator1 month seperator1 strDate;
}......methods:{getQueryParams() {if (this.dateRange) {return this.addDateRange(this.queryParams, this.dateRange)}this.queryParams.params[];return this.queryParams;},}
4.效果
