项目需求
项目需求是:写一个时间选择器,只能选择当月最后一天和下月第一天,如下图:
代码
<el-date-picker
v-model="ruleFormChild.timePoint"
type="datetime"
placeholder="选择时间点"
value-format="yyyy-MM-dd HH:mm:ss"
@focus="disDate"
@change="getLastData"
:picker-options="pickerOptions"
style="width: 53%;padding-left: 7px">
</el-date-picker>
//时间组件
data(){
return {
pickerOptions: {}
}
}
//限制日期
disDate() {
// 当前日期
let now = new Date();
//本月结束时间
let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
let timeEnd = Date.parse(monthEndDate);
this.pickerOptions.disabledDate = time => (time.getTime() < timeEnd) || (time.getTime() > timeEnd + 60 * 60 * 1000 * 24);
},
利用elementUi 的 el-date-picker标签属性:picker-options
@focus
:元素获取焦点时所触发的事件,一般是更新下拉框,每次打开会请求后端方法
value-format="yyyy-MM-dd HH:mm:ss"
:日期格式化
Date()
返回当日的日期和时间
getFullYear()
方法返回的年份,返回值是一个四位数,表示包括世纪值在内的完整年份,而不是两位数的缩写形式
getYear()
方法对于介于 1900 与 1999 之间的年份,getYear() 方法仅返回两位数字。对于 1900 之前或 1999 之后的年份,则返回 4 位数字
getMonth()
方法可返回表示月份的数字