Table of contents
Project scenario : Data TimePicker date picker use
Description of the problem: Date selector shortcut selection operation
Reason analysis: this point and object instance method
Final effect: code and effect
Project scenario:
In recent projects, it is necessary to use a large number of date and time selectors to process time, the most important of which is to perform quick selection operations based on existing specific time data, such as (given time) the last hour, the last two hours...
Problem Description:
The shortcut selection of the time range of DateTimePicker date time picker in element is just the operation of quick selection of time range for the current time new Date( ) , which does not match my current project requirements, but the shortcuts are directly configured in Picker Options , which only takes effect for the current time new Data( ), but there is an error in the time configuration I obtained
The error is written as follows:
1. Direct assignment uses the instance method of Data
// 创建时间选择快捷方式
selectTime() {
// var _this = this
this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = this.newTime
const start = this.newTime
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
},There will be the following error:
2. Convert it into a date object using the instance method of Data
// 创建时间选择快捷方式
selectTime() {
// var _this = this
this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = new Data(this.newTime)
const start = new Data(this.newTime)
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
},The time returned by the interface cannot be obtained:
Cause Analysis:
Through analysis, it is found that there are two errors:
One: this points to the problem (click to view details)
Through observation, it will be found that the this point in pickerOptionsthe method of the object is different from the this point in the external function .shortcuts pickerOptions，selectTime()
Two: The problem of object method
The interface returns a string, not a Data object, and there is no way to call the method of the Data object. Like the object object, there are corresponding methods on its prototype, which can only be called by its instance. If the string returned by the interface does not exist, there is no method on the prototype chain of the Data object.
solution:
One: Modify this to point to
var _this = this
Two: Convert the date in the form of a string to a date object (example)
var strTime=”2011-04-16”; // string date format
var date= new Date(strTime); //Convert to Data();
Through the above modifications, the shortcuts can be configured the same as the DateTimePicker date time selector in the element to realize the quick selection of the time range. The code is shown as follows:
html part:
<el-date-picker
v-model="fortTimeValue"
size="small"
type="datetimerange"
:picker-options="pickerOptions" //当前时间日期选择器特有的选项参考
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss" //绑定值的格式
format="yyyy-MM-dd HH:mm:ss"
@change="fortTimeChangeView" //用户确认选定的值时触发
align="center"
style="margin-bottom: 20px"
>
</el-date-picker>js part:
//data() 中对应数据
// 卡点时间
fortTimeValue: [],
// 存储当前卡点时间
newTime: '',
// 时间选择器参数
pickerOptions: {
// 时间选择快捷方式
shortcuts: [],
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
// methods 方法中对应处理函数
// 创建时间选择快捷方式
selectTime() {
var _this = this
_this.pickerOptions.shortcuts = [{
text: '最近半小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 1800 * 1000 * 0.5)
end.setTime(end.getTime() + 1800 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000 * 0.5)
end.setTime(end.getTime() + 3600 * 1000 * 0.5)
picker.$emit('pick', [start, end])
}
}, {
text: '最近两小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000)
end.setTime(end.getTime() + 3600 * 1000)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三小时',
onClick(picker) {
const end = new Date(_this.newTime)
const start = new Date(_this.newTime)
start.setTime(start.getTime() - 3600 * 1000 * 1.5)
end.setTime(end.getTime() + 3600 * 1000 * 1.5)
picker.$emit('pick', [start, end])
}
}]
},
final effect:
Through the above configuration of shortcuts , the time range can be quickly selected, and the effect is shown as follows:
Display the time data returned by the background in the time selector, and perform shortcut operations on the time:
Click the " fast in the last two hours " shortcut operation effect:
The above are the demand problems and simple solutions I encountered during the project. Some places are a bit simple. I hope it will be helpful to you. If there is anything wrong, welcome to communicate...