el-date-picker disable 样式
时间: 2023-11-18 07:53:53 浏览: 190
el-date-picker的disable样式可以通过CSS来修改。当el-date-picker被禁用时,它会自动添加一个名为"is-disabled"的class。因此,您可以使用以下CSS样式来修改禁用状态下的样式:
```
.el-date-picker.is-disabled .el-input__inner {
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
}
```
这将更改禁用状态下的背景颜色,边框颜色和文本颜色。您可以根据需要进行修改。
相关问题
el-date-picker时间限制 disable-date
### 设置 `el-date-picker` 组件中的禁用日期
为了在 `el-date-picker` 中设置特定日期不可选,可以利用其内置属性 `:disabled-date` 并绑定到一个自定义函数。此函数接收 JavaScript 的 `Date` 对象作为输入参数,并返回布尔值来决定对应日期是否应该被禁用。
对于简单的场景,比如想要禁用未来的日期:
```javascript
const disabledFutureDates = (date) => {
return date.getTime() > Date.now();
};
```
如果目标是阻止用户选择过去的日期,则调整条件表达式的逻辑方向即可[^3]。
当涉及到更复杂的业务需求时——例如基于两个动态变化的时间点(即起始日与终止日),则可以通过比较传入的 `date` 参数同这两个边界来进行控制[^2]。
下面给出一段综合性的代码片段用于展示如何实现上述功能,在这段代码里还包含了国际化支持以及样式定制等内容[^4]。
```html
<template>
<div class="demo">
<el-date-picker
v-model="time"
type="daterange"
:range-separator="$t('common.to')"
:start-placeholder="$t('common.stime')"
:end-placeholder="$t('common.etime')"
style="width: 300px;"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
time: '',
pickerOptions: {
onPick({ maxDate, minDate }) {
if (maxDate && !minDate) {
this.maxDate = null;
}
this.minDate = minDate || maxDate;
},
disabledDate(time) {
if (this.minDate) {
let curDayStart = new Date(this.minDate).setHours(0, 0, 0, 0);
return (
time.getTime() <
new Date(curDayStart).getTime() ||
time.getTime() > Date.now()
);
} else {
return time.getTime() > Date.now();
}
}
}
};
}
};
</script>
```
通过这种方式能够灵活地满足不同应用场景下的日期选取限制要求。
单机el-button,清除el-option,el-input,el-date-picker的内容
您可以使用以下方法来清除这些组件的内容:
1. 对于`el-button`,您可以使用`:disabled`属性来禁用按钮,并通过点击按钮来执行清除操作。
例如:
```html
<el-button :disabled="disableButton" @click="clearButton">清除</el-button>
```
```javascript
data() {
return {
disableButton: false
}
},
methods: {
clearButton() {
// 执行清除操作
this.disableButton = true;
// 重置按钮状态
this.$nextTick(() => {
this.disableButton = false;
});
}
}
```
2. 对于`el-option`,您可以通过重置选项绑定的数据来清除选中的内容。
例如:
```html
<el-select v-model="selectedOption">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-button @click="clearOption">清除</el-button>
```
```javascript
data() {
return {
selectedOption: null,
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
]
}
},
methods: {
clearOption() {
// 清除选项
this.selectedOption = null;
}
}
```
3. 对于`el-input`,您可以通过重置绑定的数据来清除输入的内容。
例如:
```html
<el-input v-model="inputValue"></el-input>
<el-button @click="clearInput">清除</el-button>
```
```javascript
data() {
return {
inputValue: ''
}
},
methods: {
clearInput() {
// 清除输入内容
this.inputValue = '';
}
}
```
4. 对于`el-date-picker`,您可以通过重置绑定的数据来清除选择的日期。
例如:
```html
<el-date-picker v-model="selectedDate"></el-date-picker>
<el-button @click="clearDate">清除</el-button>
```
```javascript
data() {
return {
selectedDate: ''
}
},
methods: {
clearDate() {
// 清除日期
this.selectedDate = '';
}
}
```
以上是一些基本的示例,您可以根据自己的实际需求进行调整和扩展。
阅读全文
相关推荐










<template>
<group class="items">
高级
</group>
<scroller class="date-content">
<inline-calendar
ref="calendar"
@on-change="onChange"
@on-view-change="onViewChange"
class="inline-calendar-demo"
:end-date="this.endDate"
:show.sync="show"
v-model="value"
:range="range"
:show-last-month="showLastMonth"
:show-next-month="showNextMonth"
:highlight-weekend="highlightWeekend"
:return-six-rows="return6Rows"
:hide-header="hideHeader"
:hide-week-list="hideWeekList"
:replace-text-list="replaceTextList"
:weeks-list="weeksList"
:render-function="buildSlotFn"
:disable-past="disablePast"
:disable-future="disableFuture"
:disable-weekend="disableWeekend">
</inline-calendar>
<group class="items">
<cell class="booklist-wrap">
已预订列表
</cell>
</group>
<group class="items choosetime">
<cell v-for="(event, index) in demoEvents" :key = "index"
primary="content" :title="event.startTime+'-'+event.endTime"
align-items="flex-start" >
{{event.userId}}
{{event.userPhone}}
{{event.title}}
</cell>
</group>
</scroller>
<x-button plain @click.native="goRoom" type="default" style="border-radius:99px;">预订</x-button>
<alert v-model="show" @on-show="onShow" @on-hide="onHide">
{{bookTip}}
确认
</alert>
</template>
<script>
// import Calendar from './base/CCalendar.vue'
import axios from 'axios'
// import $ from "jquery"
import moment from 'moment' // 格式化时间
import { Flexbox, FlexboxItem,Cell,CellBox,Group,Datetime, PopupPicker,Picker,XInput,XButton, InlineCalendar,Radio,Alert } from 'vux'
let selectTime = '' // 选中的时间变量
let selectRoom = '' // 选中的会议室
let selectArea = '' // 选中的地区
export default {
// components: {
// calendar: Calendar
// },
data () {
return {
show: true,
value: '',
listValue: '',
range: false,
showLastMonth: true,
showNextMonth: true,
highlightWeekend: false,
return6Rows: true,
hideHeader: false,
hideWeekList: false,
replaceTextList: {},
replace: false,
changeWeeksList: false,
weeksList: [],
useCustomFn: false,
buildSlotFn: () => '',
disablePast: true,
disableFuture: false,
disableWeekend: false,
showTimeSpace:false,
value3: [],
endDate:'',
startTime: '',
endTime: '',
demoEvents: [],// 预定列表
selectArea: '',// 选中的地区
selectRoom: '',// 选中的会议室
DepartList: [],// 地区列表
MeetingRoomList: [],// 会议室列表
show:false,
bookTip:''//预定失败提示信息
}
},
components: {
Flexbox,
FlexboxItem,
Cell,
CellBox,
Group,
Datetime,
PopupPicker,
Picker,
XInput,
XButton,
InlineCalendar,
Radio,
Alert
},
beforeMount (to,from, next){
window.com.setTitle('预订会议室')
},
computed: {
sporsorTitle: {
get () {
return this.$store.state.form.sporsorTitle
},
set (val) {
this.$store.dispatch('FORM_SporsorTitle',val)
}
},
sporsorType: {
get () {
return this.$store.state.form.sporsorType
},
set (val) {
this.$store.dispatch('FORM_SporsorType',val)
}
},
conferRoomId: {
get () {
return this.$store.state.form.conferRoomId
},
set (val) {
this.$store.dispatch('FORM_ConferRoomId',val)
}
},
flagUpSporsor: {
get () {
return this.$store.state.form.flagUpSporsor
},
set (val) {
this.$store.dispatch('FORM_FlagUpSporsor',val)
}
},
sporsorId: {
get () {
return this.$store.state.form.sporsorId
},
set (val) {
this.$store.dispatch('FORM_SporsorId',val)
}
}
},
watch: {
replace (val) {
this.replaceTextList = val ? {
'TODAY': '今'
} : {}
},
useCustomFn (val) {
this.buildSlotFn = val ? (line, index, data) => {
return /8/.test(data.date) ? '' : ''
} : () => ''
},
changeWeeksList (val) {
this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
},
methods: {
onHide () {
this.show=false;
},
onShow () {
this.show=true;
},
//会议地点改变
changePicker() {
var urlPath = ''
if(this.value != '') {
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+this.value
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
urlPath = config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+nowDate
}
// console.log('urlPath:'+urlPath)
axios.get(urlPath).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
},
onViewChange (val, count) {
// alert('on view change:'+val + ',' + count)
},
onChange (val) {
selectTime = val
if(this.value3[1] != undefined) {
// console.log('url:' + config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime)
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+this.value3[1]+'&orderDate='+selectTime).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({
userId:temp.data[i].userId,
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm'),
userPhone:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取列表失败'
this.show = true;
// app.toast("获取列表失败!")
}
});
}
},
chooseDepartment (paramkey) { // 根据地区编号获取会议室列表
selectArea = paramkey
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomListByAreaId?areaId='+paramkey).then((data) => {
var temp = data.data
if(temp.code === '0') {
this.MeetingRoomList = temp.data
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室列表!')
}
});
},
chooseBookingRoom (eventroomId) { //根据会议室编号和选定日期获取预定列表
selectRoom = eventroomId
if(selectTime === '') {// 选定了会议室,没选定日期
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId='+eventroomId+'&orderDate='+nowDate).then((data) => {
var temp = data.data
if(temp.code === '0') {
var opArry = []
for(var i in temp.data) {
// var ss = ''
// if(temp.data[i].stateShow == '1') {
// ss = '进行中'
// } else if(temp.data[i].stateShow == '2') {
// ss = '正常'
// }
temp.data[i].userPhone=temp.data[i].userPhone==''?'无':temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?'无':temp.data[i].title
opArry.push({userName:temp.data[i].userName,
userPhone:temp.data[i].userPhone,
// stateShow:ss,// 状态
title:temp.data[i].title,
startTime:moment(temp.data[i].startTime).format('HH:mm'),
endTime:moment(temp.data[i].endTime).format('HH:mm')
});
}
this.demoEvents = opArry
} else {
this.bookTip = '获取会议室列表失败'
this.show = true;
// app.toast('获取会议室失败!')
}
});
} else {// 选定了会议室,选定日期
// alert("value: " + obj.value + ',selectTime:' + selectTime)
}
},
//跳转到会议室预定
goRoom () {
var choice_time = ''
if(this.value != '') {
var dateObj = new Date()
choice_time = this.value + ' ' + dateObj.getHours()
} else {
let date = new Date
let nowDate = moment(date).format('YYYY-MM-DD HH')
choice_time = nowDate
}
var timeString = moment(window.com.convertDateFromStrings(choice_time + ':00:00')).format('YYYY-MM-DD HH:mm')
if(this.value3.length != 0) {
this.$router.push({path:'bookingRoom',query:{roomId:this.value3[1],conferenceRoomId:this.$route.query.conferenceRoomId,timeStart:timeString,timeEnd:timeString}})
} else {
this.bookTip = '请点击选择会议室'
this.show = true;
// app.toast('请选择会议室!')
}
},
//跳到高级搜索
goSearchPage: function() {
this.$router.push({path:'conferenceRoomSearch'})
}
},
mounted () {
let dq=new Date();
let dqtime=dq.getFullYear()+'-'+(dq.getMonth()+2)+'-'+dq.getDate();
this.endDate=dqtime;
if(window.localStorage.getItem('userId') != null && window.localStorage.getItem('userId') != undefined) {
// 获取地区和会议室名称数据
// console.log('url:'+config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList')
axios.get(config.serverUrl + '/microinformation/zy/mi/obtainAreaAndConferenceroomList').then((data) => {
var temp = data.data
if(temp.code === '0') {
this.DepartList = temp.data
} else {
this.bookTip = '获取地区列表失败'
this.show = true;
// app.toast('获取地区列表失败!')
}
});
} else {
window.location.href = "http://dwz.cn/1IooUbPb"
}
}
}
</script>
<style lang="less" src="./booking.less"></style> 这块代码我需要优化一个功能点,即如9:00-18:00之间会议室有空闲时间的就在日期底部显示一个小绿点


