Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.