el-date-picker定义了 moment(new Date()).startOf('day').format('YYYY-MM-DD HH:mm:ss'),然后组件就不能选择其他的了怎么按半年
时间: 2025-03-25 17:12:34 浏览: 44
### 解决方案
在 Vue3 和 Element Plus 中,`el-date-picker` 组件的行为可以通过其属性和方法进行调整。如果设置了 `moment(new Date()).startOf('day').format('YYYY-MM-DD HH:mm:ss')` 作为初始值后发现无法选择其他日期,则可能是由于组件的内部逻辑限制了可选范围。
#### 初始值设置问题分析
当使用 `moment.js` 或者类似的库来生成时间戳并将其格式化为字符串时,需要注意的是,Element Plus 的 `el-date-picker` 更倾向于接收 JavaScript 原生的 `Date` 对象而不是字符串形式的时间表示[^1]。因此,在初始化时应传递一个 `new Date()` 类型的对象而非经过格式化的字符串:
```javascript
const initialDate = moment().startOf('day').toDate(); // 转换为原生 Date 对象
```
这样可以避免因数据类型的不匹配而导致的功能异常。
---
#### 半年选择功能实现
为了实现按半年选择的功能,可以通过自定义事件监听以及动态更新模型值的方式来扩展 `el-date-picker` 的行为。以下是具体实现方式:
##### 自定义选项列表
创建一组预设的半年区间供用户选择,并绑定至 `v-model` 上下文中:
```vue
<template>
<div>
<!-- 使用 el-select 来提供半年区间的快速切换 -->
<el-select v-model="selectedHalfYearRange">
<el-option label="上半年 (Jan-Jun)" value="first-half"></el-option>
<el-option label="下半年 (Jul-Dec)" value="second-half"></el-option>
</el-select>
<!-- 隐藏的实际日期选择器 -->
<el-date-picker
v-if="!isUsingPredefinedRanges"
v-model="customDateRange"
type="daterange"
range-separator="-"
start-placeholder="Start date"
end-placeholder="End date"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import moment from 'moment';
// 定义变量存储当前选定的半年范围
const selectedHalfYearRange = ref(null);
// 动态计算对应的日期范围
const customDateRange = computed({
get() {
if (!selectedHalfYearRange.value) return null;
const now = new Date();
let startDate;
let endDate;
switch (selectedHalfYearRange.value) {
case 'first-half':
startDate = moment(now).month(0).date(1); // January 1st of the current year
endDate = moment(now).month(5).endOf('month'); // June last day
break;
case 'second-half':
startDate = moment(now).month(6).date(1); // July 1st
endDate = moment(now).month(11).endOf('month'); // December last day
break;
}
return [startDate.toDate(), endDate.toDate()];
},
set(value) {
console.log('Custom Range Selected:', value);
}
});
// 控制是否显示手动输入框
const isUsingPredefinedRanges = computed(() => !!selectedHalfYearRange.value);
</script>
```
上述代码片段实现了两个主要功能:
1. **半年选择**:通过 `<el-select>` 提供固定的上下半年选项。
2. **动态绑定日期范围**:基于用户的半季度选择自动填充隐藏的 `<el-date-picker>` 输入框中的起始与结束日期[^4]。
---
#### 关于默认值失效的原因排查
对于提到的 `default-value` 属性不起作用的情况,通常是因为该属性仅用于首次渲染阶段指定初始状态,而不会影响后续交互过程中的实际值变化。推荐改用显式的 `v-model` 数据绑定代替静态配置项[^2]:
```javascript
data() {
return {
pickerValue: new Date(),
};
},
mounted() {
this.pickerValue = moment(this.pickerValue).startOf('day').toDate();
}
```
此做法能够确保无论何时加载页面都能正确应用预期的初始条件。
---
### 注意事项
- 如果仍然遇到不可控的问题,请确认所使用的版本号兼容性(例如某些旧版可能未完全支持特定 API)。
- 尝试开启调试模式查看控制台是否有错误提示信息辅助定位根本原因。
阅读全文
相关推荐











<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之间会议室有空闲时间的就在日期底部显示一个小绿点





