原文：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
}
}
element的el-date-picker组件实现只可选择当前之后的时间，包括时分
原文：https://blog.csdn.net/m0_49623851/article/details/128488379
element UI时间日期选择器控制只能选今天此刻半小时后的时间(可自己设置)
原文：https://blog.csdn.net/qq_45448489/article/details/126142843
1.使用参数picker-options
建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差）
disabledDate ：控制只能选择今天及以后的日期
selectableRange ：控制选择的时间段。如果是今天，则时间从下个小时开始，否则从0时开始
data(){
return{
startTimeRange: ''"
}
}
<el-date-picker v-model="ruleForm.date1" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间" :picker-options="{
disabledDate: time => {
return time.getTime() < Date.now() - 3600 * 1000 * 24
},
selectableRange: startTimeRange
}" @focus="focus">
</el-date-picker>
watch: {
'ruleForm.date1': {
handler(newValue, oldValue) {
if (newValue) {
let time = new Date();
let yy = time.getFullYear();
let mm = time.getMonth() + 1;
let dd = time.getDate();
let hh = time.getHours();
let mf = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
let ss = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
let nowDate = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
// let nowDate = this.$format(new Date(), 'YYYY-MM-DD HH:mm:ss');
let dt = nowDate.split(" ");
let st = '';
if (newValue.split(" ")[1] == dt[1]) {
let timeB = new Date().getTime() + 1800000;
var timeC = new Date(timeB)
let h = timeC.getHours();
let f = timeC.getMinutes() < 10 ? '0' + timeC.getMinutes() : timeC.getMinutes();
let s = timeC.getSeconds() < 10 ? '0' + timeC.getSeconds() : timeC.getSeconds();
let startAtC = h + ':' + f + ':' + s;
// 是今天,选择 的时间开始为此刻的时分秒
st = startAtC
}
else {
// 明天及以后从0时开始
// st = '00:00:00';
let timeB = new Date().getTime() + 1800000;
var timeC = new Date(timeB)
let h = timeC.getHours();
let f = timeC.getMinutes() < 10 ? '0' + timeC.getMinutes() : timeC.getMinutes();
let s = timeC.getSeconds() < 10 ? '0' + timeC.getSeconds() : timeC.getSeconds();
let startAtC = h + ':' + f + ':' + s;
// 是今天,选择 的时间开始为此刻的时分秒
st = startAtC
}
this.startTimeRange = st + ' - 23:59:59';
}
}
}
}
// 时间选择限制
focus() {
this.$nextTick(() => {
document
.getElementsByClassName('el-button--text')[0]
.setAttribute('style', 'display:none')
})
},
