el-date-picker默认当前月份,默认当前日期与前一天日期
·
一:默认当前月份
实现效果图:(现在是四月份)

代码:
<el-form-item label="请选择月份:">
<el-date-picker
popper-class="dateEdit"
v-model="searchForm.monthValue"
type="month"
placeholder="选择月份"
value-format="yyyy-MM"
>
</el-date-picker>
</el-form-item>
data中声明:
searchForm: {
monthValue: "",
},
js代码(我写在created中的,可自行封装):
created() {
// 默认当月
var nowDate = new Date();
var date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
day: nowDate.getDate()
};
const dayDate =
date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
var date = new Date();
this.$set(this.searchForm, "monthValue", dayDate.toString());
}
二:默认当天日期与前一天日期,精确到时分秒
实现效果图:(现在是四月份)

代码:
<el-form-item>
<el-date-picker
v-model="dateValue"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm"
>
//如果想把时间写死可以直接这样用,组件库自带的
//<!-- :default-time="['00:00:00', '23:59:59']"-->
</el-date-picker>
data中声明:
dateValue: [],//由于有两个日期,所以用数组接收
js代码(我写在created中的,可自行封装):
created(){
// 当天设定时间
let d = new Date();
let year1, month1, day1;
[year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()];
let date1 = new Date(year1, month1, day1, 7);
this.dateValue.push(date1);
// 前一天设定日期时间
let year2, month2, day2;
d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
[year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()];
let date2 = new Date(year2, month2, day2, 7);
this.dateValue.unshift(date2);
//通过push和unshift给数组前面后后面添加元素
}
三:默认日期,只包含日月年
实现效果图:

代码(购买和投运一样的,就只展示一个了):
<el-form-item label="购买时间" prop="purchaseTime">
<el-date-picker
v-model="editForm.purchaseTime"
type="date"
placeholder="请选择购买时间"
>
</el-date-picker>
</el-form-item>
data中:
editForm: {
userName: "",
userPassword: "",
startWorkTime: "",
purchaseTime: "",//字符串格式
},
js代码:
//封装了的 先在methods中写事件
methods:{
// 设置日期默认
getDate() {
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}`;
return defaultDate;
},
}
//然后再页面创建的时候调一下(我的在弹窗中,所以选择弹窗打开的时候调)
open() {
this.deviceDialogVisible = true;
this.editForm.startWorkTime=this.getDate()//投运时间的
this.editForm.purchaseTime=this.getDate()//购买时间的
},
四 :默认当前日期,用斜杠隔开
实现效果图:

代码:
<div>{{ currentDate }}</div>
//data中:
currentDate:"",
//最后在created中
created(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
this.currentDate = `${year}/${month}/${day}`;
}
五:默认当月一号至今的日期
实现效果图:

代码:
<div class="input-box">
<span>发生时间</span>
<el-date-picker
v-model="searchObj.timerange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
clearable
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
>
</el-date-picker>
</div>
data中:
searchObj: {
timerange: [],
}
methods中:
defaultDate() {
let date = new Date();
let year = date.getFullYear().toString();
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString();
let da =
date.getDate() < 10
? "0" + date.getDate().toString()
: date.getDate().toString();
let end = year + "-" + month + "-" + da;
let beg = year + "-" + month + "-01";
//将值设置给插件绑定的数据
this.searchObj.timerange.push(end);
this.searchObj.timerange.unshift(beg);
},
五补充(默认当周或者两周时间)
//methods中:
defaultDate() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//7就是七天 14就是两个周 可改
//将值设置给插件绑定的数据
this.searchObj.timeRange.push(end);
this.searchObj.timeRange.unshift(start);
},
//最后created中调一下默认时间事件
created(){
this.defaultDate
}
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)