datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

elementUI的组件文档中没有详细说明type="dates"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择:

<div class="block">
    <span class="demonstration">多个日期</span>
    <el-date-picker
      type="dates"
      v-model="value4"
      :picker-options="pickerOption"
      placeholder="选择一个或多个日期">
    </el-date-picker>
  </div>
</div>

通过设置变量pickerOption的值可设置快捷选择:

pickerOption:{
	shortcuts:[
		text:'这半个月',
		onClick(picker){
			let end = new Date();
			let start = dateFormat(new Date(),'-');
			end.setTime(end.getTime() + 3600 * 1000 * 24 * 14);
			end = dateFormat(end,'-');
			let allDate = getAllDate(start,end);
			picker.$emit('pick', [...allDate]);
		}
	]
}

其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:

let dateFormat = (time,h='')=>{
	let ymd = '';
	let month = (time.getMonth() + 1 )>=10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() +1));
	let day = time.getDate() >= 10? time.getDate() : ('0' + time.getDate());
	ymd += time.getFullYear() +h;
	ymd += month + h;
	ymd += day;
	return ymd;
}
let getAllDate=(start,end)=>{
	let allDateArr=[];
	let startArr = start.split('-');
	let endArr = end.split('-');
	let db = new Date();
	let db.setUTCFullYear(startArr[0[,startArr[1]-1,startArr[2]);
	let de = new Date();
	de.setUTCFullYear(endArr[0[,endArr[1]-1,endArr[2]);
	let unixDb = db.getTime();
	let unixDe = de.getTime();
	let stamp;
	const oneDay = 24*60*60*1000;
	for(stamp = inixDb;stamp<=unixDe;){
		allDateArr.push(dateFormat(new Date(parseInt(stamp)),'-'));
		stamp = stamp+oneDay;
	}
	return allDateArr;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个简单的滚动日期选择组件的实现,基于 Vue 3。 首先,您需要安装以下依赖项: ```bash npm install dayjs -S ``` 接下来,您可以创建一个名为 `DatePicker.vue` 的组件,代码如下: ```vue <template> <div class="date-picker"> <div class="picker-header"> <button @click="previousYear"><<</button> <button @click="previousMonth"><</button> <span class="picker-title">{{ currentMonth }}</span> <button @click="nextMonth">></button> <button @click="nextYear">>></button> </div> <div class="picker-body"> <div class="picker-row" v-for="week in weeks" :key="week"> <div class="picker-cell" v-for="(day, index) in week" :key="index" :class="{ 'is-today': isToday(day), 'is-selected': isSelected(day) }" @click="selectDate(day)"> {{ day }} </div> </div> </div> </div> </template> <script> import dayjs from 'dayjs'; export default { name: 'DatePicker', props: { value: { type: Date, required: true, }, }, data() { return { currentDate: dayjs(this.value), }; }, computed: { currentMonth() { return this.currentDate.format('MMMM YYYY'); }, weeks() { const firstDay = this.currentDate.startOf('month').startOf('week'); const lastDay = this.currentDate.endOf('month').endOf('week'); const days = []; let day = firstDay; while (day.isBefore(lastDay)) { days.push(day); day = day.add(1, 'day'); } return days.reduce((acc, day) => { const week = Math.floor(day.diff(firstDay, 'day') / 7); if (!acc[week]) { acc[week] = []; } acc[week].push(day.format('D')); return acc; }, []); }, }, methods: { isToday(day) { return dayjs().isSame(this.currentDate.date(day)); }, isSelected(day) { return this.currentDate.isSame(dayjs().date(day)); }, selectDate(day) { const newDate = this.currentDate.date(day); this.$emit('input', newDate.toDate()); this.currentDate = newDate; }, previousMonth() { this.currentDate = this.currentDate.subtract(1, 'month'); }, nextMonth() { this.currentDate = this.currentDate.add(1, 'month'); }, previousYear() { this.currentDate = this.currentDate.subtract(1, 'year'); }, nextYear() { this.currentDate = this.currentDate.add(1, 'year'); }, }, }; </script> <style scoped> .date-picker { display: inline-block; border: 1px solid #ccc; border-radius: 4px; padding: 8px; font-size: 14px; } .picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .picker-title { font-weight: bold; } .picker-row { display: flex; } .picker-cell { flex: 1; text-align: center; cursor: pointer; } .is-today { font-weight: bold; } .is-selected { background-color: #ccc; } </style> ``` 在您的应用程序中使用此组件时,您可以使用 `v-model` 指令来双向绑定选定的日期值,如下所示: ```vue <template> <div> <date-picker v-model="selectedDate"></date-picker> <p>You selected: {{ selectedDate }}</p> </div> </template> <script> import DatePicker from './DatePicker.vue'; export default { components: { DatePicker, }, data() { return { selectedDate: new Date(), }; }, }; </script> ``` 这个日期选择组件会显示当前月份的日历,并且允许您通过向左或向右滚动来选择不同的月份和年份。当您选择日期时,它将更新选定的日期值,并将其传递回父组件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值