用 Vue 实现原生日期选择器

效果：

部分代码

.vue

<template><div class="date-select"><div class="date-select__custom"><span class="date-select__custom--text">自定义日期</span><span class="date-select__custom--value"><span v-if="dateData.length" v-html="dateText"></span><span v-else>请选择日期</span></span></div><div class="date-select__header" v-if="loading"><div class="date-select__header-prev"><span class="date-select__btn date-select__btn-prev--year">&lt;&lt;</span><span class="date-select__btn date-select__btn-prev--month">&lt;</span></div><div class="date-select__header-middle">{{ year }} 年 {{ month }} 月</div><div class="date-select__header-next"><span class="date-select__btn date-select__btn-next--month">&gt;</span><span class="date-select__btn date-select__btn-next--year">&gt;&gt;</span></div></div><div class="date-select__body"><div class="date-select__weeks"><div class="date-select__week" v-for="i in week" :key="i">{{ i }}</div></div><div class="date-select__month" v-if="loading"><div :class="['date-select__day', i.date < i.showDate && 'prev-month', i.date > i.showDate && 'next-month']" v-for="i in monthData" :key="i.date">{{ i.showDate }}</div></div></div></div>
</template>

js：

export default {name: 'date-select',props: {selectData: {type: Array,default: () => []},type: {type: String,default: 'date'},isOpen: {type: Boolean,default: false}},data() {return {monthData: [],week: ['日', '一', '二', '三', '四', '五', '六'],year: '',month: '',start: null,end: null,dateData: [],oldDateData: [],loading: true}},watch: {isOpen: {handler(val) {if (val) {this.dateData = this.selectDataconst [startDateArr, endDateArr] = [this.dateData?.[0]?.split('-'), this.dateData?.[1]?.split('-')]this.start = startDateArr == null ? null : new Date(startDateArr[0], startDateArr[1] - 1, startDateArr[2])this.end = endDateArr == null ? null : new Date(endDateArr[0], endDateArr[1] - 1, endDateArr[2])// 更多筛选是 if 销毁if (this.atomic) {this.oldDateData = this.selectData}// 默认筛选框是 show 销毁this.init()}},immediate: true}},computed: {dateText() {return `<span class="start-date">${this.dateData?.[0]}${this.dateData?.[1] == null ? '</span>' : '</span> 至 <span class="end-date">' + this.dateData?.[1]}`}},mounted() {this.addEvent()},methods: {addEvent() {const $datePickerDom = document.querySelector('.date-select')$datePickerDom.addEventListener('click',e => {e.stopPropagation()const $target = e.targetconst targetClassList = $target.classListif ((!targetClassList.contains('date-select__btn') &&!targetClassList.contains('date-select__day') &&!targetClassList.contains('start-date') &&!targetClassList.contains('end-date')) ||targetClassList.contains('date-select__btn--disabled') ||targetClassList.contains('date-select__day--disabled')) {return}if (targetClassList.contains('date-select__btn') || targetClassList.contains('start-date') || targetClassList.contains('end-date')) {let fixDate = nullif (targetClassList.contains('date-select__btn-prev--year')) {fixDate = this.fixMonthToYear(this.year - 1, this.month)} else if (targetClassList.contains('date-select__btn-prev--month')) {fixDate = this.fixMonthToYear(this.year, this.month - 1)} else if (targetClassList.contains('date-select__btn-next--month')) {fixDate = this.fixMonthToYear(this.year, this.month + 1)} else if (targetClassList.contains('date-select__btn-next--year')) {fixDate = this.fixMonthToYear(this.year + 1, this.month)} else {// 点击日期跳转到对应日期const dateArr = $target.innerHTML.split('-')fixDate = this.fixMonthToYear(+dateArr[0], +dateArr[1])}this.setMonthDate(fixDate.year, fixDate.month)} else if (targetClassList.contains('date-select__day')) {const dayType = this.judgeDayType(targetClassList)// 设置日期开始和结束时间，并返回设置的状态this.setStartEndDate(dayType, $target)this.dateData = [this.formatDate(this.start), this.formatDate(this.end)]}this.reRender()},false)},swipeRight() {const fixDate = this.fixMonthToYear(this.year, this.month - 1)this.setMonthDate(fixDate.year, fixDate.month)this.reRender()},swipeLeft() {const fixDate = this.fixMonthToYear(this.year, this.month + 1)this.setMonthDate(fixDate.year, fixDate.month)this.reRender()},// 重新渲染reRender() {// 通过开关 loading，来清空已点击选项this.clearUI()this.$nextTick().then(() => {this.renderUI()this.renderClickUI()})},init(year = this.start?.getFullYear(), month = this.start?.getMonth() + 1) {this.setMonthDate(year, month)this.reRender()},// 渲染未来时间不可选renderUI() {const fixDate = this.fixMonthToYear(this.year, this.month + 1)const date = new Date(fixDate.year, fixDate.month - 1)const today = new Date()// 下一年、下一月if (date - today > 0) {const monthDomClassList = document.getElementsByClassName('date-select__btn-next--month')[0].classListconst yearDomClassList = document.getElementsByClassName('date-select__btn-next--year')[0].classListmonthDomClassList.add('date-select__btn--disabled')yearDomClassList.add('date-select__btn--disabled')}// 下一天const dateDoms = document.getElementsByClassName('date-select__day')const dateDomsLength = dateDoms.lengthfor (let i = 0; i < dateDomsLength; i++) {const dateData = this.monthData[i]const date = new Date(dateData?.year, dateData?.month - 1, dateData?.showDate)if (date - today > 0) {while (i < dateDomsLength) {const domClassList = dateDoms[i].classListdomClassList.add('date-select__day--disabled')i++}}}},// 通过开始和结束时间，设置页面点击样式renderClickUI() {// 没点击，则无需渲染if (!this.start) {return}// 获取当前渲染日期界面的第一个和最后一个日期const [first, last] = [this.monthData[0], this.monthData[this.monthData.length - 1]]// 当点击的时间不在开始和结束的范围内,则无需渲染const firstDate = new Date(first.year, first.month - 1, first.showDate)const lastDate = new Date(last.year, last.month - 1, last.showDate)if (this.start - lastDate > 0 || (this.end && this.end - firstDate < 0)) {return}// 赋值新的点击、包括中间状态、开始和结束// 遍历每个日期const dateDoms = document.getElementsByClassName('date-select__day')for (let i = 0; i < dateDoms.length; i++) {const dateData = this.monthData[i]const date = new Date(dateData.year, dateData.month - 1, dateData.showDate)const domClassList = dateDoms[i].classList// 只有开始，给开始设置样式if (!this.end && this.start - date === 0) {domClassList.add('date-select__day--start')break}// 开始和结束都有// 设置开始if (this.start - date === 0) {// 当点击相同的if (this.end === this.start) {domClassList.remove('date-select__day--start')this.start = nullthis.end = nullthis.dateData = []break} else {// 给开始添加范围样式domClassList.add('date-select__day--start', 'select-both')}continue} else if (this.start - date < 0 && date - this.end < 0) {// 渲染中间的样式domClassList.add('date-select__day--middle')continue} else if (this.end - date === 0) {// 渲染结束的样式domClassList.add('date-select__day--end', 'select-both')break}}},// 判断当前点击的日期是上个月，这个月，还是当前月份的judgeDayType(classList) {let dayType = 'currMonth'if (classList.contains('prev-month')) {dayType = 'prevMonth'} else if (classList.contains('next-month')) {dayType = 'nextMonth'}return dayType},// 设置开始和结束日期setStartEndDate(dayType, dom) {const day = dom.innerHTMLlet clickDate = nulllet fixDate = nullswitch (dayType) {case 'currMonth':fixDate = this.fixMonthToYear(this.year, this.month)breakcase 'prevMonth':fixDate = this.fixMonthToYear(this.year, this.month - 1)breakcase 'nextMonth':fixDate = this.fixMonthToYear(this.year, this.month + 1)break}clickDate = new Date(fixDate.year, fixDate.month - 1, day)// 清空已选的开始和结束，只点击了开始if (!this.start || (this.start && this.end)) {this.start = clickDatethis.end = null} else if (this.start - clickDate === 0) {// 开始和结束都在同一天this.end = this.start} else if (this.start - clickDate > 0) {// 交换结束和开始this.end = this.startthis.start = clickDate} else {// 设置结束this.end = clickDate}},setMonthDate(year, month) {// 若没有传入年月，则默认选择当前年月if (!year || !month) {const today = new Date()year = today.getFullYear()month = today.getMonth() + 1 // 例如想要的是12月，getMonth() 会返回 11（js 里的 month 总是会比实际的少 1）}// 当月第一天相关let firstDateOfCurrMonth = new Date(year, month - 1, 1) // 获取当月第一天let weekOfFirstDate = firstDateOfCurrMonth.getDay() // 当月第一天是一周的星期几。那么之前的时间是上个月的// 周日if (weekOfFirstDate === 0) {weekOfFirstDate = 7}// 上个月最后一天相关let lastDateOfLastMonth = new Date(year, month - 1, 0) // 上个月最后一天 年月日let lastDayOfLastMonth = lastDateOfLastMonth.getDate() // 上个月最后一天 日let preMonthDayCount = weekOfFirstDate // 本月第一行，留有上个月的天数。因为是从周日开始的。若 1 号为周二，那么留有上个月的天数为 2（周日、周一）let lastDateOfCurrMonth = new Date(year, month, 0) // 本月的最后一天 年月日let lastDayOfCurrMonth = lastDateOfCurrMonth.getDate() // 本月的最后一天 日// 设置月的范围let range = 5 * 7let allDayCount = lastDayOfCurrMonth + preMonthDayCountif (allDayCount > range) {// 会有 6 行range += 7} else if (allDayCount <= range - 7) {// 只有 4 行range -= 7}this.monthData = this.getMonthData(range, year, month, preMonthDayCount, lastDayOfLastMonth, lastDayOfCurrMonth)this.year = yearthis.month = month},getMonthData(range, year, month, preMonthDayCount, lastDayOfLastMonth, lastDayOfCurrMonth) {const ret = []let date, showDate, currMonthfor (let i = 0; i < range; i++) {date = i + 1 - preMonthDayCount // 本月的几号showDate = datecurrMonth = month// 上个月if (date <= 0) {currMonth = month - 1showDate = lastDayOfLastMonth + date // 上个月的第几号} else if (date > lastDayOfCurrMonth) {// 下一个月currMonth = month + 1showDate = showDate - lastDayOfCurrMonth // 下个月的第几号}const fixDate = this.fixMonthToYear(year, currMonth)ret.push({year: fixDate.year,month: fixDate.month,date,showDate})}return ret},fixMonthToYear(year, month) {// 若本月为 1 月，则上一月为 12 月if (month === 0) {month = 12year -= 1}// 若本月为 12 月，则下一月为 1 月if (month === 13) {month = 1year += 1}year = year || 0return { year, month }},formatDate(date) {if (!date) {return date}return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}-${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()}`},// 重新渲染日历clearUI() {this.loading = falsethis.$nextTick(() => {this.loading = true})},cancel() {if (this.atomic) {this.confirmData('', this.oldDateData)} else {// 日期重置回当月this.dateData = []this.start = nullthis.end = nullthis.setMonthDate()this.reRender()}},confirm(type) {this.confirmData(type, this.dateData)},confirmData(type, dateData) {const value = dateData[1] ? [dateData[0], dateData[1]] : dateData[0] ? [dateData[0]] : []this.$emit('confirm', type, value)}}
}

用 Vue 实现原生日期选择器相关推荐

【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:<最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云> Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使 ...
vue element的日期选择器，选择日期时间范围的限制
最近在做活动配置,那么就会需要配置活动的开始时间和活动的结束时间,对于活动开始时间选择范围是不能今天之前时间的,活动的结束时间也是,是不能选择今天之前的时间和活动开始之前时间的,有了明确的目的,现在就 ...
vue使用element日期选择器，选择日期少一天的问题
添加属性value-format="yyyy-MM-dd"即可
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
vue【element ui】el-date-picker 日期选择器控件限制可选的开始时间和结束时间
项目场景: 总结一下日期控件实现开始日期.结束日期的选择范围限制,以便更符合实际情况. 需求: 1.开始时间和结束时间都不能选当前日期之后的时间.(当前时间:2022年5月16日) 2.先选开始时间的 ...
android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
调用Android原生日期选择器对话框就是DatePickerDialog,具体内容如下在Android4.4系统上效果如图: 在Android5.0以上效果如图: 1.Activity的onCre ...
js日期控件_11个开源的Github开源日期选择器组件，供你选择
介绍本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
android时间选择原生,安卓原生时间选择器
调用Android原生日期选择器对话框也就是DatePickerDialog package com.example.myapplication; import android.app.DatePic ...

用 Vue 实现原生日期选择器

效果：

部分代码

用 Vue 实现原生日期选择器相关推荐

最新文章

热门文章