实现一个周选择器组件

1、需求:

默认每个月的第一个周一为该月的第一周开始,规则如图所示
在这里插入图片描述

2、使用到的工具:

vue2+vant2+momentjs

3、父组件:

data中定义涉及到的参数

minDate: new Date(this.$moment().subtract(12,'month'))
maxDate: new Date(),
selectWeek: []

处理selectWeek,获取当前日期所在的周

getWeek() {
	// 当天是周几
	let weekDay = this.$moment().weekday();
	if(weekDay === 0) {
		// 周日
		weekDay = 7;
	}
	let monday = this.$moment().subtract(weekDay - 1, 'd').format('YYYY-MM-DD');
	let sunday = this.$moment().add(7 - weekDay, 'd').format('YYYY-MM-DD');
	return [monday, sunday]
}

4、周选择器组件:

<template>
	<!-- 周选择器组件 -->
	<van-picker
		ref="pickerWeek"
		@confirm="confirm"
		@change="handleChange"
		@cancel="cancel"
		show-toolbar
		title="选择周"
		:columns="columns"
		:item-height="$lessVariables.vanPickerItemHeight"/>
</template>

文件参考资源文件:文件地址

5、展示效果如图:

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
之前在网上想找一个简单易用的日历选择插件,发现这种前端日历插件很少,而且很多文章写的的算法都不是统一的,所以自己实现一个基于jquery的日历插件(还支持跳转到指定年份和哦)。 插件中的算法:每日为起始,第一以每年第一个星期四所在的为第一(网上找的好像这个算法比较正规) 实现的效果是在手机端,也可以在PC端用,毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数:1.日期)(返回类名字符串,多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数:1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和的DOM部分可选择并跳转到指定年份和。 插件提供的方法: //获取第一天方法weekfirstdate(),传入年份和数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几getweeknum(),传入年,月,日(注:这里的月份从0开始) console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定confirmweek(),传入年份和数 weekfn.confirmweek(getyear,getweek); //跳转到本nowweek() weekfn.nowweek();
好的,这是一个比较复杂的组件,需要考虑多种情况,下面我尝试给出一个简单的实现思路。 首先,我们需要一个容器来放置整个日期选择器,可以用 `div` 元素实现。然后,我们需要一个表头来显示年月,可以用 `div` 元素实现。接着,我们需要一个表格来显示日期,可以用 `table` 元素实现。 在表头中,我们需要显示当前选择的年月,并提供向前和向后翻页的按钮,可以用 `button` 元素实现。在表格中,我们需要显示一整个月的日期,可以用 `td` 元素实现。为了方便处理,我们可以把表格拆分成多个行,每行显示一的日期。 接下来,我们需要实现滑动功能。可以使用 Vue3 提供的 `@touchstart`、`@touchmove`、`@touchend` 事件,在事件处理函数中计算手指的滑动距离,然后根据距离计算应该滚动到哪个位置。具体实现可以参考如下代码: ```html <template> <div class="date-picker" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <div class="header"> <button class="prev" @click="goPrev"><</button> <div class="title">{{ title }}</div> <button class="next" @click="goNext">></button> </div> <table class="dates"> <thead> <tr> <th v-for="(day, index) in days" :key="index">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeks" :key="index"> <td v-for="(date, index) in week" :key="index" :class="{ active: isActive(date) }" @click="select(date)">{{ date }}</td> </tr> </tbody> </table> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const days = ['日', '一', '二', '三', '四', '五', '六']; const weeks = ref([]); const title = ref(''); const currentDate = ref(new Date()); const startDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1)); const endDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 0)); const startY = ref(0); const endY = ref(0); const init = () => { title.value = `${currentDate.value.getFullYear()}年${currentDate.value.getMonth() + 1}月`; const firstDay = startDate.value.getDay(); const lastDate = endDate.value.getDate(); const prevMonthEndDate = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 0).getDate(); const prevMonthDates = prevMonthEndDate - firstDay + 1; const nextMonthDates = 42 - lastDate - firstDay; const dates = []; for (let i = prevMonthDates; i <= prevMonthEndDate; i++) { dates.push(i); } for (let i = 1; i <= lastDate; i++) { dates.push(i); } for (let i = 1; i <= nextMonthDates; i++) { dates.push(i); } for (let i = 0; i < 6; i++) { weeks.value[i] = dates.slice(i * 7, (i + 1) * 7); } }; const goPrev = () => { currentDate.value.setMonth(currentDate.value.getMonth() - 1); startDate.value.setMonth(startDate.value.getMonth() - 1); endDate.value.setMonth(endDate.value.getMonth() - 1); init(); }; const goNext = () => { currentDate.value.setMonth(currentDate.value.getMonth() + 1); startDate.value.setMonth(startDate.value.getMonth() + 1); endDate.value.setMonth(endDate.value.getMonth() + 1); init(); }; const isActive = (date) => { return date === currentDate.value.getDate(); }; const select = (date) => { currentDate.value.setDate(date); init(); }; const onTouchStart = (e) => { startY.value = e.touches[0].pageY; }; const onTouchMove = (e) => { endY.value = e.touches[0].pageY; const delta = endY.value - startY.value; if (Math.abs(delta) >= 50) { if (delta > 0) { goPrev(); } else { goNext(); } startY.value = endY.value; } }; const onTouchEnd = () => { startY.value = 0; endY.value = 0; }; init(); return { days, weeks, title, goPrev, goNext, isActive, select, onTouchStart, onTouchMove, onTouchEnd, }; }, }; </script> <style scoped> .date-picker { width: 100%; height: 200px; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; font-size: 16px; font-weight: bold; background-color: #f5f5f5; } .title { flex-grow: 1; text-align: center; } .dates { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: center; } .active { background-color: #409eff; color: #fff; } .prev, .next { border: none; background-color: transparent; font-size: 16px; cursor: pointer; } .prev:hover, .next:hover { color: #409eff; } </style> ``` 这段代码实现一个简单的竖着滑动年月日的日期选择器组件,使用了 Vue3 的 Composition API,使用了 `ref` 和 `setup` 函数。具体实现过程中,我们使用了一些计算属性和事件处理函数,实现了日期的显示和滑动功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山为樽水为沼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值