Implement date selection component in vue mobile terminal

I have compiled a summary of the knowledge points about the date selection component of vue mobile terminal. I hope it can help readers and learn together for reference.

Let me share the source code with you first: https://github.com/lx544690189/vue-mobile-calendar

##Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

Usage

install

npm install vue-mobile-calendar

or:(from the dist folder)

<script src="vue-mobile-calendar.js" type="text/javascript"></script>

Quickstart

import Vue from 'vue'
import Calendar from 'vue-mobile-calendar'

Vue.use(Calendar)

<calendar
 v-model="calendarShow"
 :defaultDate="defaultDate"
 @change="handelChange">
</calendar>

Attributes

##optionv-modelformatdefaultDateminDatemaxDatecloseByClickmaskmonthweekEvents

description	type	default
show/hide the calendar	Boolean	false
format date	String	"yyyy-MM-dd"
default selected date	Date	new Date()
optional minimum date	Date	null
optional maximum date	Date	null
close by mask	Boolean	true
text of month	Array	["January", "February", "March", "April", "五"month", "June", "July", "August", "September", "October", "November", "December"]
text of day	Array	["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "week Saturday", "Sunday"]

##event namedescriptionparameter of callbackchangewhen date change(date,formatDate)Reference

framework7

mint-ui

The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.

Related articles:

How to use eventBus in vue to achieve communication between components at the same level

How to implement downloading in node.js Picture

Examples of how to implement hls playback using vue2.0 vue-dplayer technologies

The above is the detailed content of Implement date selection component in vue mobile terminal. For more information, please follow other related articles on the PHP Chinese website!