需要先安装 moment 日期格式转换的插件
1、安装
npm install moment -S
2、引入
在main.js写这两行代码
import moment from "moment";
Vue.prototype.$moment = moment;
在页面上就可以 使用了
demo
<sec-row>
<sec-col :span="12">
<sec-form-item label="触发时间" prop="timeRange">
<sec-date-picker
:clearable="true"
v-model="filterForm.timeRange"
type="datetimerange"
:start-placeholder="start"
:end-placeholder="ends"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:disabled="disabled"
>
</sec-date-picker>
</sec-form-item>
</sec-col>
</sec-row>
data
data() {
return {
filterForm: {
name: "",
userIP: "",
visitURL: "",
timeRange: [this.getNowTime(),this.getEndTime()], // 时间的组合
},
start: this.getNowTime(), //开始的时间
ends: this.getEndTime(), //结束的时间
};
},
methods
//处理默认选中当前日期
getNowTime() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒,就需要加这个, 如若不需要,此行可忽略
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date}${hour}`;
console.log(defaultDate);
return defaultDate;
this.$set(this.filterForm, "timeRange", defaultDate);
},
//处理默认选中结束日期
getEndTime() {
var date = new Date();
//年 getFullYear():四位数字返回年份
var year = date.getFullYear(); //getFullYear()代替getYear()
//月 getMonth():0 ~ 11
var month = date.getMonth() + 1;
//日 getDate():(1 ~ 31)
var day = date.getDate();
//时 getHours():(0 ~ 23)
var hour = date.getHours();
//分 getMinutes(): (0 ~ 59)
var minute = date.getMinutes();
//秒 getSeconds():(0 ~ 59)
var second = date.getSeconds();
// 月 转化为两位数
month = month.toString().padStart(2, "0");
// 日 转化为两位数
day = day.toString().padStart(2, "0");
// 时 转化为两位数
hour = hour.toString().padStart(2, "0");
// 分 转化为两位数
minute = minute.toString().padStart(2, "0");
// 秒 转化为两位数
second = second.toString().padStart(2, "0");
var time =
year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
console.log(time);
return time;
},
//实现搜索时 将timeRange的值赋值给 开始时间和结束时间
// 搜索
submitForm() {
getRomte({
tenant_name: this.filterForm.name,
client: this.filterForm.userIP,
access_url: this.filterForm.visitURL,
start_time: this.filterForm.timeRange[0], //开始的时间
end_time: this.filterForm.timeRange[1], //结束的时间
batch: 1,
batch_size: this.pagesize,
}).then((res) => {
console.log(res);
console.log(this.filterForm.timeRange);
console.log(res.result.records);
this.total = res.result.total;
this.tableData = res.result.records;
});
},