A C-End Date Selector Component Based on Vue Development.
To view a demo online: https://codesandbox.io/embed/staging-darkness-k7ymp
To view demo examples locally clone the repo and run npm install && npm run dev
npm install @wujiaxian/datepicker --saveimport Vue from 'vue'
import Wdatepicker from '@wujiaxian/datepicker'
import "@wujiaxian/datepicker/dist/Wdatepicker.css"
Vue.use(Wdatepicker)Or use directly from a CDN
<head>
<link href="https://unpkg.com/@wujiaxian/datepicker/dist/Wdatepicker.css"/>
</head>
<div id="app">
<w-datepicker></w-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker"></script>
<script>
const app = new Vue({
el: '#app'
})
</script><w-datepicker></w-datepicker>value prop if passed should be a Date object or String Date Formatting or Number time stamp
<script>
export default {
data () {
return {
date: new Date('2019-09-30')
}
}
}
</script>
<w-datepicker :value="date"></w-datepicker>Using v-model
<w-datepicker v-model="date"></w-datepicker>Using 'v-model and defaultValue'
<script>
export default {
data () {
return {
date: ''
}
}
}
</script>
<w-datepicker v-model="date" defaultValue="2019-09-30"></w-datepicker>Emits events
<script>
export default {
data () {
return {
date: ''
}
},
methods: {
change (value) {
},
focus (componentInstance) {
},
blur (componentInstance) {
},
// Click is not the date of that month, switch to that month or select the date of that month or do nothing. Operations are prohibited at times other than maximum and minimum.
disabledDate ({ year, month, date, disabledDate, thisMonth }) {
}
}
}
</script>
<w-datepicker v-model="date" @changge="change" @focus="focus" @blur="blur" @disabledDate="disabledDate"></w-datepicker>String Formatting
| Token | Desc | Example |
|---|---|---|
| YYYY | year | 2019 |
| MM | month | 01 |
| DD | date | 30 |
| hh | hour | 12 |
| mm | minute | 30 |
| ss | second | 30 |
Number time stamp
1569572985 // second
1569572985000 // Millisecond
Date Object
new Date('2019/09/30')
| Prop | Type | Default | Description |
|---|---|---|---|
| value / v-model | Date|String|Number | Date value of the datepicker | |
| defaultValue | Date|String|Number | Date selector default date value | |
| editable | Boolean | false | Whether the input box can be entered |
| formatDate | String | YYYY-MM-DD | The format displayed in the input box |
| minDate | Date|String|Number | Ten years ago | Minimum time |
| maxDate | Date|String|Number | Ten Years From Now | Maximum time |
| clickDisabledDate | String | Click on the non-current month date, select the month date when the value is empty, switch to that month when the value is switch, and the other values do not operate. | |
| placeholder | String | Selection date | Input box prompt information |
| selectState | String | circle | Time Selected State, Value: Square or Round or Empty |
| clearBtn | Boolean | true | Whether the Clear button is displayed or not |
| disabled | Boolean | false | Prohibition of use |
| disabledDate | Array|Function | [] | Disabled date |
| closeIconClass | String | Close the button class, you can set icon class to replace the current one |
| Event | Output | Description |
|---|---|---|
| change | String | Triggered after the time has been changed to receive the changed value |
| focus | Object | Input box gets focus trigger and receives component instance |
| blur | Object | Input box lost focus trigger, receive component instance |
| disabledDate | Object | To receive the current date information, click on a callback from a non-current month date or a banned date |
| Name | params | Description |
|---|---|---|
| header | component instance, {self} | Date Selection Box Header Insert Content |
| footer | component instance, {self} | Insert content at the bottom of the date selection box |
| date-icon | Custom Date Icon | |
| close-icon | Custom Close Icon |
<script>
export default {
data () {
return {
date: ''
}
},
methods: {
headClickHandler (componentInstance) {
},
switchingDate (componentInstance, type) {
let now = new Date()
let cnow = new Date(this.date)
switch (type) {
case 'front':
cnow.setDate(cnow.getDate() - 10)
break
case 'after':
cnow.setDate(cnow.getDate() + 10)
break
}
const t = type === 'now' ? now : cnow
componentInstance.selectDate(t)
}
}
}
</script>
<w-datepicker v-model="date">
<template v-slot:header="{self}">
<div @click="headClickHandler(self)">This is a head content.</div>
</template>
<template v-slot:footer="{self}">
<button @click="switchingDate(self, 'front')">The first 10 days</button>
<button @click="switchingDate(self, 'now')">Today<button>
<button @click="switchingDate(self, 'after')">The next 10 days</button>
</template>
</w-datepicker>Dates can be disabled in a number of ways.
Array mode
<script>
export default {
data () {
return {
disableDate: ['2019-09-18', '2019-09-08']
}
}
}
</script>
<w-datepicker v-model="date" :disabledDate="disableDate"></w-datepicker>Function mode
<script>
export default {
data () {
return {
date: ''
}
},
methods: {
disableDate (currentDate, monthDate, nowDate) {
let date = new Date('2019/09/10')
return date.getFullYear() === monthDate.getFullYear() && date.getMonth() === monthDate.getMonth() && date.getDate() === monthDate.getDate()
}
}
}
</script>
<w-datepicker :disabledDate="disableDate"></w-datepicker>The default use of Chinese in components is required. If you want to use other languages, you need to have multiple language settings. Take English as an example, in main.js:
<script>
// Complete introduction
import Vue from 'vue'
import Wdatepicker from '@wujiaxian/datepicker'
import "@wujiaxian/datepicker/dist/Wdatepicker.css"
import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'
Vue.use(Wdatepicker, {
locale: en
})
// or
Vue.use(Wdatepicker)
Wdatepicker.locale(en)
// or
import locale from '@wujiaxian/datepicker/dist/lib/locale/index'
locale.use(en)
Vue.use(Wdatepicker)
</script>compatible vue-i18n@6.x
Vue-i18n of 6.x is not supported by default. You need to process it manually.
<script>
import Vue from 'vue'
import Wdatepicker from '@wujiaxian/datepicker'
import "@wujiaxian/datepicker/dist/Wdatepicker.css"
import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
message: {
en: {
...en
},
cn: {
//...cn
}
}
})
Vue.use(Wdatepicker, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')
</script>or
<script>
import Vue from 'vue'
import Wdatepicker from '@wujiaxian/datepicker'
import "@wujiaxian/datepicker/dist/Wdatepicker.css"
import en from '@wujiaxian/datepicker/dist/lib/locale/lang/en'
import locale from '@wujiaxian/datepicker/dist/lib/locale/index'
Vue.use(VueI18n)
Vue.use(Wdatepicker)
const i18n = new VueI18n({
locale: 'en',
message: {
en: {
...en
},
cn: {
//...cn
}
}
})
locale.i18n((key, value) => i18n.t(key, value))
</script> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker/dist/lib/locale/lang/en.js"></script>
<script>
Vue.use(Wdatepicker)
Wdatepicker.locale(W.lang.en)
// or
Vue.use(Wdatepicker, {
locale: W.lang.en
})
</script>Matching vue-i18n usage
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker"></script>
<script src="https://unpkg.com/@wujiaxian/datepicker/dist/lib/locale/lang/en.js"></script>
<script>
Vue.use(VueI18n)
Vue.use(Wdatepicker)
const messages = {
ko: {
...W.lang.ko
}
}
const i18n = new VueI18n({
locale: 'ko',
messages,
})
Wdatepicker.i18n((key, value) => i18n.t(key, value))
</script>- 简体中文（zh_CN）
- 繁体中文（zh_TW）
- English（en）
- Japanese（ja）
- Korean（ko）
Copyright (c) 2019-present, Jia Wu