原文:http://t.csdn.cn/8cQVB
需求:
用户只能创建当前的月报,如果当年已有月份有了月报那么这个月也不可以建月报
<el-form-item label="月份:" :prop="isdisabled?'':'stateDate'">
<el-date-picker
v-model="ruleForm.stateDate"
value-format="yyyy-MM"
format="yyyy-MM"
class="control"
type="month"
placeholder="选择月"
:picker-options="pickerOptions"
/>
</el-form-item>
const pastMonthList = []
const date = new Date()
const curYear = date.getFullYear()
if (params.year < curYear) {
for (let i = 1; i <= 12; i++) {
// 年份与月份拼成数组
pastMonthList.push(`${params.year}-${i < 10 ? '0' + i : i}`)
}
this.creatDateList = pastMonthList.filter((m, idx) => {
// 返回没有匹配上的日期,allMon为后台返回的月份
return allMon.indexOf(m) === -1
})
} else {
//currentMonth这当年及当月之前所有月份
this.creatDateList = currentMonth().filter((m, idx) => {
// 返回没有匹配上的日期
return allMon.indexOf(m) === -1
})
}
pickerOptions: {
disabledDate: (time) => {
const year = time.getFullYear()
let month = time.getMonth() + 1
if (month < 10) month = '0' + month
const ym = year + '-' + month
// 把所有年月和需要建立的月份匹配,把没有匹配上的返回出去,让月份选择器可选
return !this.creatDateList.includes(ym)
}
},
我实际项目中需求的是这个:
原文http://t.csdn.cn/cGr6b
<!--开始与结束-->
<el-date-picker
v-model="form.time1"
:picker-options="pickerStart"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-date-picker
v-model="form.time2"
:picker-options="pickerEnd"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<!--数组-->
<el-table :data="form.tableData" style="width: 100%">
<el-table-column prop="startTime" label="开始时间" width="180">
<template slot-scope="{row,$index}">
<el-form-item
:prop="'form.tableData[' + $index + '].startTime'"
:rules="[{required:true,message: '请选择开始时间',trigger:'blur'}]"
>
<el-date-picker
v-model="row.startTime"
:picker-options="row.startTimePic"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="endTime" label="完成时间" width="180">
<template slot-scope="{row,$index}">
<el-form-item
:prop="'form.tableData[' + $index + '].endTime'"
:rules="[{required:true,message: '请选择完成时间',trigger:'blur'}]"
>
<el-date-picker
v-model="row.endTime"
:picker-options="row.endTimePic"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
</el-table>
```javascript
data(){
return {
form:{
time1:'',
time2:'',
tableData:[],
},
pickerStart:{
disabledDate: (time) => {
return this.pickDateStart(time)
}
},
pickerEnd:{
disabledDate: (time) => {
return this.pickDateEnd(time)
}
}
}
},
methods:{
pickDateStart(time){
if(this.form.time2){
return time.getTime() > this.form.time2
}else{
return false
}
},
pickDateEnd(time){
if(this.form.time1){
return time.getTime() < this.form.time1
}else{
return false
}
},
},
watch:{
//数组
'form.tableData':{
handler(list){
list.forEach(item=>{
item.endTimePic = {
disabledDate(time) {
if(item.startTime){
return time.getTime() < item.startTime
}
}
}
item.startTimePic = {
disabledDate(time) {
if(item.endTime){
return time.getTime() > item.endTime
}
}
}
})
},
deep:true
}
}
标签:picker,return,form,element,item,time,const,month,options
From: https://www.cnblogs.com/gyh907368/p/17132052.html