How to swipe left and right to select date components in vue

Today, I would like to share with you how to slide around vue to select the date component of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Effect picture:

1. Install dayjs date file

Npm install dayjs-save

2. Encapsulated components:

{{showDate.year}} {{yearName}} {{monthNams [showDate.month-1]}} {{item}} {{day.value} } import dayjs from 'dayjs' Let touchStartPosition;let touchEndPosition;let timeStexport default {name: 'inlineCalendar', props: {defaultDate: {type: [Date, Number, Array, String, dayjs],}, disabledDate: {type: Array, default () {return [] },}, minDate: {type: [Date, Number, Array, String, dayjs],}, maxDate: {type: [Date, Number, Array, String, dayjs],}, mode: {type: String, default: 'single',}, dayClick: {type: Function, default () {return function () {return true } },}, enableTouch: {type: Boolean, default: true,}, monthNames: {type: Array, default () {return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December] },}, weekNames: {type: Array, default () {return ['one', 'two', 'three', 'four', 'five', 'six', 'day] },}, yearName: {type: String, default: 'year',}, restrictCurrentMonth: {type: Boolean, default: false,},}, watch: {mode () {this.init () },}, data () {return {fullDate: [[], []], translateX: 0, showDate: {year: undefined, month: undefined,}, dateNow: {year: dayjs (). Year (), month: dayjs (). Month () + 1, date: dayjs (). Date (),} SelectDate: [], touch: {x: 0, y: 0,}, isTouching: false,} }, created () {this.init ();}, methods: {init (date) {this.selectDate = []; let {defaultDate, mode} = this; if (date) {defaultDate = date;} let dateToShow = dayjs (). StartOf ('month'); if (mode =' single' & & defaultDate) {this.selectDate = dayjs (defaultDate) .startOf ('day') DateToShow = this.selectDate.startOf ('month');} if (mode =' multiple' & & Array.isArray (defaultDate)) {if (defaultDate.length > 0) {this.selectDate = defaultDate.map ((item) = > dayjs (item) .startOf ('day')) }} if (mode = = 'during' & & Array.isArray (defaultDate)) {if (defaultDate.length = 2) {const startDate = dayjs (defaultDate [0]). StartOf (' day'); const endDate = dayjs (defaultDate [1]). StartOf ('day'); if (startDate.isBefore (endDate) | | startDate.isSame (endDate) {this.selectDate = [startDate, endDate]) } this.showDate = {year: dateToShow.year (), month: dateToShow.month () + 1,}; this.getFullDate (this.showDate);}, touchstart (event) {if (this.enableTouch) {touchStartPosition = event.touches [0] .clientX; touchEndPosition = event.touches [0] .clientY; timeStamp = event.timeStamp This.touch = {x: 0, y: 0,}; this.isTouching = true }, touchmove (event) {if (this.enableTouch) {this.touch = {x: (event.touches [0] .clientX-touchStartPosition) / this.$refs.calendar.offsetWidth, y: (event.touches [0] .clientY-touchEndPosition) / this.$refs.calendar.offsetHeight,} }}, touchend (event) {if (this.enableTouch) {this.isTouching = false; const during = dayjs (event.timeStamp) .diff (timeStamp) If (Math.abs (this.touch.x) > Math.abs (this.touch.y) & & Math.abs (this.touch.x * this.$refs.calendar.offsetWidth) > 20) {if (this.touch.x > 0) {this.changeMonth ('prev');} else if (this.touch.x)

< 0) { this.changeMonth('next'); } } else { this.touch = { x: 0, y: 0, }; } } }, // 触发change事件 emitChange() { this.$emit('change', this.selectDate); }, // 触发切换年月事件 emitSwitch(showDate) { if (this.restrictCurrentMonth) { this.selectDate = []; } this.$emit('switch', showDate); }, // 日期点击事件 onDayClick(day) { if (!this.dayClick(day.dateTime)) { return; } switch (this.$props.mode) { case 'single': if (!day.isSelect && !day.isDisable) { this.selectDate = day.dateTime; this.getFullDate(this.showDate); this.emitChange(); } break; case 'multiple': if (!day.isSelect && !day.isDisable) { this.selectDate.push(day.dateTime); this.getFullDate(this.showDate); this.emitChange(); } else { if (this.selectDate.length >

1) {this.selectDate = this.selectDate.filter ((item) = >! item.isSame (day.dateTime)); this.getFullDate (this.showDate); this.emitChange ();}} break; case 'during': if (day.isDisable) return; if (this.restrictCurrentMonth & & day.isGrey) return If (this.selectDate.length = 0) {this.selectDate = [day.dateTime];} else if (this.selectDate.length = 1) {this.selectDate.push (day.dateTime); if (this.selectDate [1] .isBefore (this.selectDate [0])) {this.selectDate.reverse () }} else if (this.selectDate.length = 2) {this.selectDate = [day.dateTime];} this.getFullDate (this.showDate); this.emitChange (); break;}}, / / switch year changeYear (action) {const date = dayjs (`${this.showDate.year}-${this.showDate.month}`); let computedDate Switch (action) {case 'prev': this.translateX + = 1; computedDate = date.subtract (1,' year'); break; case 'next': this.translateX-= 1; computedDate = date.add (1,' year'); break } this.showDate = {year: computedDate.year (), month: computedDate.month () + 1,}; this.emitSwitch (this.showDate); this.getFullDate (this.showDate);}, / / switch month changeMonth (action) {const date = dayjs (`${this.showDate.year}-${this.showDate.month}`); let computedDate Switch (action) {case 'prev': this.translateX + = 1; computedDate = date.subtract (1,' month'); break; case 'next': this.translateX-= 1; computedDate = date.add (1,' month'); break } this.showDate = {year: computedDate.year (), month: computedDate.month () + 1,}; this.emitSwitch (this.showDate); this.getFullDate (this.showDate) }, / / exposed method: toggle the selected time changeDate (date) {if (dayjs (date). IsValid () | | Array.isArray (date)) {this.init (date);} else {console.error ('Type of parameter is exposure') }}, / / exposure method: toggle the currently displayed time changeDateView (date = dayjs ()) {const changeDate = dayjs (date); this.showDate = {year: changeDate.year (), month: changeDate.month () + 1,}; this.getFullDate (this.showDate) }, getFullDate () {const date = dayjs (`${this.showDate.year}-${this.showDate.month}`); const thisDate = this.getDate (date); const prevDate = this.getDate (date.subtract (1, 'month')); const nextDate = this.getDate (date.add (1,' month')) This.fullDate = [prevDate.fullDate, thisDate.fullDate, nextDate.fullDate,];}, / / whether the current date is selected isSelect (date) {/ / console.log (date) let select = false Switch (this.$props.mode) {case 'single': if (this.selectDate & & date.isSame (this.selectDate)) {select = true;} break; case' multiple': if (this.selectDate.length > 0 & & this.selectDate.some ((item) = > date.isSame (item) {select = true;} break } return select;}, / / whether the current time is between selectDate isBetting (date) {if (this.mode = 'during') {const startDate = this.selectDate [0]; const endDate = this.selectDate [1]; if (this.selectDate.length = 1) {return date.isSame (startDate) } else if (this.selectDate.length = 2) {return (date.isAfter (startDate) & & date.isBefore (endDate)) | | date.isSame (startDate) | | date.isSame (endDate);}} return false;}, getIsDisable (dateTime) {let isDisable = false; const disabledDate = this.disabledDate.map ((item) = > dayjs (item) .startOf ('day') If (this.minDate | | this.maxDate) {if (this.minDate) {const minDate = dayjs (this.minDate) .startOf ('day'); isDisable = dateTime.isBefore (minDate);} if (! isDisable & & this.maxDate) {const maxDate = dayjs (this.maxDate) .endOf (' day'); isDisable = dateTime.isAfter (maxDate) }} else if (disabledDate.length > 0) {if (this.mode! = = 'during') {isDisable = disabledDate.some ((item) = > item.isSame (dateTime));}} return isDisable;}, getDate (thisDate) {let date = []; const prevDate = thisDate.subtract (1,' month'); const nextDate = thisDate.add (1, 'month') Const firstDayOfWeek = thisDate.day () | | 7; const dayCountOfThisMonth = thisDate.daysInMonth (); const dayCountOfPrevMonth = prevDate.daysInMonth (); const prevIndexOfThisMonth = firstDayOfWeek-1; const NextIndexOfThisMonth = firstDayOfWeek + dayCountOfThisMonth-2; const disabledDate = this.disabledDate.map ((item) = > dayjs (item) .startOf ('day')); for (let I = 0; I

< 7 * 6; i++) { // 上月 if (i < prevIndexOfThisMonth) { const value = dayCountOfPrevMonth - (firstDayOfWeek - i - 2); const dateTime = prevDate.date(value); date[i] = { value, dateTime, isGrey: true, isToday: dateTime.isSame(dayjs().startOf('day')), isSelect: this.isSelect(dateTime), isDisable: this.getIsDisable(dateTime), isDuring: this.isBetting(dateTime), }; } // 当月 if ( i >

= prevIndexOfThisMonth & & I NextIndexOfThisMonth) {const value = I-firstDayOfWeek-dayCountOfThisMonth + 2; const dateTime = nextDate.date (value) Date [I] = {value, dateTime, isGrey: true, isToday: dateTime.isSame (dayjs (). StartOf ('day')), isSelect: this.isSelect (dateTime), isDisable: this.getIsDisable (dateTime), isDuring: this.isBetting (dateTime),};} const fullDate = [] For (let I = 0; I

< 6; i++) { fullDate.push(date.slice(i * 7, (i + 1) * 7)); } return { fullDate, }; }, },};@import './style.css'; 相关的style.css文件 .m-calendar { background: #fff; box-shadow: 0px 2px 6px 0px rgba(183, 183, 183, 0.2);}.m-calendar .m-toolbar { padding-bottom: 0.36266667rem;}.m-calendar .m-toolbar { display: flex; height: 2.56rem;}.m-calendar .m-toolbar .m-month-selector,.m-calendar .m-toolbar .m-year-selector { display: flex; align-items: center; justify-content: space-between; padding-top: 0.74666667rem;}.m-calendar .m-toolbar .m-month-selector,.m-calendar .m-toolbar .m-year-selector { line-height: 1.06666667rem;}.m-calendar .m-toolbar .m-month-selector,.m-calendar .m-toolbar .m-year-selector { font-size: 0.768rem; font-family: PingFangSC-Medium, PingFangSC; font-weight: 500; color: #29262a;}.m-calendar .m-toolbar .m-year-selector { padding-left: 0.91733333rem;}.m-calendar .m-week-header { padding: 0 0.91733333rem;}.m-calendar .m-week-header { padding-bottom: 0.512rem;}.m-calendar .m-week-header { position: relative; display: flex; box-sizing: border-box; justify-content: space-between; font-size: 0.59733333rem;}.m-calendar .m-week-header .m-week-day { text-align: left; line-height: 0.85333333rem; font-family: PingFangSC-Regular, PingFangSC; font-weight: 400; color: #222222;}.m-calendar .m-months-container { position: relative; box-sizing: border-box; height: 12.37333333rem; overflow: hidden;}.m-calendar .m-months-container .m-months-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}.m-calendar .m-months-container .m-months-wrapper .m-months { position: absolute; top: 0; left: 0; right: 0; bottom: 0; will-change: transform; width: 16rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row { padding-top: 0.512rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row { width: 16rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row { position: relative; display: flex; height: 1.408rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day { margin-right: 0.87466667rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day:nth-child(1) { margin-left: 0.66133333rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day { font-size: 0.59733333rem; font-family: PingFangSC-Medium, PingFangSC; font-weight: 500; color: #222222;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day { position: relative; height: 1.408rem; width: 1.408rem; line-height: 1.408rem; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num { width: 1.408rem; display: inline-block; border-radius: 100%;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num { height: 1.408rem; line-height: 1.408rem;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-grey { color: #b8b8b8;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-today { background: #5DABF3; color: #fff;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-disable { color: #b8b8b8; text-decoration: line-through;}.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-select { background: #007aff; color: #fff;} 3、使用到的页面 import inlineCalendar from '../components/inlineCalendar';export default { name: "home", data() { return { }; }, components: { inlineCalendar }, methods: { dayClick(date) { console.log('date---->

', date); console.log (date.format (' YYYY-MM-DD')); let dates = date.format ('YYYY-MM-DD');},},}; .data {position: fixed; top: 1.877333remt; width: 100%; height: 100%;} that's all about the article "how to slide around to select a date component for vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.