vue-date-range
A vue component for choosing dates and date ranges. Uses Moment.js for date operations. Support Chinese lunar.
use
npm
npm install vue-date-range
Calendar
<calendar class="calendar"
:show-lunar="true"
:first-day-of-week="1"
:disable-days-before-today="disableDaysBeforeToday"
:sync-date.sync="date"
:lang="lang" @change="onChange"></calendar>
...
import {Calendar} from 'vue-date-range';
export default {
components: {
Calendar
},
data() {
return {
disableDaysBeforeToday: true,
lang: 'zh',
date: moment()
};
},
methods: {
onChange(date) {
this.date = date;
}
}
}
DateRange
<daterange class="calendar" :sync-range.sync="range" :lang="lang" @change="onChange"></daterange>
...
import {DateRange} from 'vue-date-range';
export default {
components: {
DateRange
},
data() {
return {
lang: 'en',
range: {
startDate: moment(),
endDate: moment().add(7, 'days')
}
};
},
methods: {
onChange(range) {
this.range = range;
},
setRange (p) {
if (typeof p === 'number') {
console.log(p)
this.range = {
startDate: moment().add(p, 'days'),
endDate: moment()
}
}
},
}
}
browser
Download vue-date-range.min.js from dist/ and import in your web page. Example:
...
<div id="calendarLunar" class="calendar-wrapper">
<span>{{date.format('YYYY-MM-DD')}}</span>
<calendar class="calendar"
:show-lunar="true"
:first-day-of-week="1"
:disable-days-before-today="disableDaysBeforeToday"
:sync-date="date"
:lang="lang" @change="onChange"></calendar>
</div>
...
<div id="range" class="calendar-wrapper">
<span>{{range.startDate.format('YYYY-MM-DD')}}</span>~<span>{{range.endDate.format('YYYY-MM-DD')}}</span>
<daterange class="calendar" :sync-range="range" :lang="lang" @change="onChange"></daterange>
<button @click.stop.prevent="setRange(-7)">Last 7 days</button>
<button @click.stop.prevent="setRange(-30)">Last 1 month</button>
</div>
...
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-date-range.min.js"></script>
<script>
new Vue({
el: '#calendarLunar',
components: {
'calendar':daterange.Calendar
},
data() {
return {
disableDaysBeforeToday: true,
lang: 'zh',
date: moment()
};
},
methods: {
onChange(date) {
this.date = date;
}
}
});
new Vue({
el: '#range',
components: {
'daterange':daterange.DateRange
},
data() {
return {
lang: 'en',
range: {
startDate: moment(),
endDate: moment().add(7, 'days')
}
};
},
methods: {
onChange(range) {
this.range = range;
},
setRange (p) {
if (typeof p === 'number') {
console.log(p)
this.range = {
startDate: moment().add(p, 'days'),
endDate: moment()
}
}
},
}
});
</script>
.sync
For Vue2.3.0+, we can use .sync
modifier:
<calendar :sync-datesync="date"></calendar><date-range :sync-rangesync="range"></date-range>
v-model
We can also use v-model
modifier (these can be configured in 2.2.0+):
<calendar v-model="date"></calendar><date-range v-model="range"></date-range>
Props
Calendar
-
show-lunar: Show lunar or not. Default is false.
-
disable-days-before-today: Disable days before today or not.
-
days-disabled-start: Disable days after this day.
-
days-disabled-end: Disable days before this day.
-
disabled-func: Used to decide if the day is disabled or not.
...// set odd days to disabled{var date = dayMomentif date % 2 === 1return truereturn false}... -
day-class-func: Used to add class to day.
...// add 'today, important' class to today{if dayMoment ===return 'today' 'important'}... -
first-day-of-week: Set the first day of Week. Default is 0 (Sunday).
-
monthYearFormat: The displaying format for month and year. Default is 'MM - YYYY'.
-
lang: Language
addr. | language |
---|---|
da | Danish |
en | English |
es | Spanish |
fi | Finnish |
fr | French |
hr | Hrvatski |
it | Italian |
lt | Lithuanian |
nl | Nederlandse |
de | German |
pt-br | Portuguese |
vi | Vietnamese |
zh | Chinese |
ja | Japanese |
he | Hebrew |
cs | Czech |
ru | Russian |
bg | Bulgarian |
sv | Swedish |
th | Thai |
ro | Roman |
sl-si | Slovenian |
uk | Ukrainian |
-
sync-date: The default selected date. Can be used as the “two-way binding” for date (Vue 2.3.0+). e.g.:
-
range: The selected date range. e.g.:
range: startDate: endDate:
DateRange
This component is build on Calendar
, so it has all the props of Calendar
except sync-date
Also it has its specific props:
- emitChangeOnStep0: If set to true, it will emit result after selecting one date. Or it emits result after selecting two dates. Default is false.
- sync-range: The default date range. Can be used as the “two-way binding” for range (Vue 2.3.0+). e.g.:
custom style
This is a day html structure example:
28 重阳
The span tag will has different classes (selected
, passive
, in-range
, start-day
, end-day
) according to the dates selected.
You can set your custom style using these classes. e.g.:
.ayou-day-cell.start-day { border-bottom-left-radius: 50%; border-top-left-radius: 50%; background-color: transparent;}.ayou-day-cell.end-day { border-bottom-right-radius: 50%; border-top-right-radius: 50%; background-color: transparent;}.ayou-day-cell.in-range { background-color: orange;}