A mobile friendly date picker for vue2
A calendar friendly for mobile, which can select the date by the range, friendly for mobile.It is typically used for hotel.
vue-datepicker-mobile
Sorry for my English.
A calendar friendly for mobile, which can select the date by the range, friendly for mobile.It is typically used for hotel.
Attr
param | description | type | defalut |
---|---|---|---|
single | select single date.default select a range. | boolean | false |
autoComplete | After choosing the date whether to auto-complete, if false, it will show confirm button. | boolean | false |
mondayFirst | Whether Monday is the first-day as a week, default for Sunday. | boolean | false |
reverseSelect | Whether allow reverse choose date. | boolean | false |
beginningText | text of beginning for selected | string | '入住' |
endText | text of end for selected | string | '离店' |
Props
param | description | type | defalut |
---|---|---|---|
display | display state, show or hide datepicker window. | boolean | false |
displayRange | unit is month | number | 13 |
displayRangeStart | display start month.default is this month. e.g. '2018-9-1' |
string | - |
selectRangeStart | can choose start date.default is today. | string | - |
selectRangeEnd | can choose the end date. default show the end. | string | - |
restday | custom restday.default highlight display and show chinese "休".e.g. ['2019.5.1', '2019.5.2', '2019.5.3'] |
array | - |
workday | custom restday.default highlight display and show chinese "班".e.g. ['2019.5.4', '2019.5.5'] |
array | - |
custom | custom data.It is a array of string or object of string.It return form Object Of Date. | array | - |
initPosition | Init position for visible month.Allow a string of date,default is this month. | string | - |
custom
Data will use today as index to 0, one by one add to after the date.
If value's type is string, it will show as text.['¥100']
pass a object to option more
param | description | type |
---|---|---|
text | text | string |
highlight | highlight for text | boolean |
bgcolor | background color | string |
bdcolor | border color | string |
disabled | disabled will can't select them in selected range | boolean |
e.g. [{ highlight: true, text: '¥100' }]
More,you can added another properties,they in custom
with Object Of Date.
Events
select({ start, end, range })
Called after select date range.start: object, end: object, range:[object]. range is a selected array does't include start and end.If don't have space between start and end,range is a array of null.
Object Of Date
Selected Object Of Date has following keys:
param | description | type |
---|---|---|
year | year | number |
month | month | number |
day | date | number |
date | full date YYYY-M-D | string |
odate | full date YYYY-MM-DD | string |
rest | Whether restday,include is not workday's weekend and custom restday. | boolean |
restday | Whether custom restday | boolean |
workday | Whether custom workday | boolean |
disabled | Whether disabled | boolean |
custom | custom data.See custom |
object |
begin | Whether selected date start | boolean |
active | Whether selected date between start and end | boolean |
end | Whether selected date end | boolean |
cancel()
Called after cancel, it used to hide datepicker window.
selectDisabled(date)
Called after selected a date has custom.disabled
.date
is a Object Of Date.
viewport({ year, month, date })
Called when somemonth in viewport with window, return current date.
* Safari is not working.If you need working for Safari, you need a polyfill.
click(target[, start])
Click a allow selected date.
Only when 'single' is 'false'(default) have 'start' param,if this click is select a start of range,the 'start' is 'true'
clickStart(target)
Only when 'single' is 'false'(default) called.
this click is select a start of range.
clickEnd(target)
Only when 'single' is 'false'(default) called.
this click is select a end of range.
Methods
setData(custom, date)
Set custom data for one day.the 'date' is date string like: YYYY-MM-DD.
used demo
npm i aki-datepicker
// main.js
import AkiDate from 'aki-datepicker'
Vue.use(AkiDate)
<input type="date" @click="show = true" v-model="startDate" readonly>
-
<input type="date" @click="show = true" v-model="endDate" readonly>
<aki-date
ref="date"
:restday="restday"
:workday="workday"
:display="show"
:custom="data"
@select="select"
@cancel="cancel"
@selectDisabled="selectErr"
@viewport="viewport"
@click="click"
@clickStart="clickStart"
@clickEnd="clickEnd"
autoComplete/>
import { Snackbars } from 'clearaki-ui'
export default {
data() {
return {
startDate: '',
endDate: '',
restday: [],
workday: ['2018-9-29', '2018-9-30'],
data: ['¥1300', '¥1345', { highlight: true, text: '¥999' }],
show: true
}
},
methods: {
select({ start, end, range }) {
this.startDate = start.odate
this.endDate = end.odate
console.log('range', range)
this.show = false
},
cancel() {
this.show = false
},
selectErr(date) {
console.log('date', date)
Snackbars(`无法选择该范围:${date.date}为${date.custom.dec}`)
},
viewport({ year, month, date }) {
console.log('Now in line of sight is:', `${year}-${month}`)
},
click(target, start) {
console.log('click', target)
console.log('click', start)
},
clickStart(tar) {
console.log('start', tar)
// set the border color of day after a aweek is orange
const time = new Date(tar.date).getTime() + 7 * 24 * 60 * 60 * 1000
const date = new Date(time).toJSON().split('T')[0]
this.$refs.date.setData({ bdcolor: 'orange' }, date)
},
clickEnd(tar) {
console.log('end', tar)
}
},
created() {
setTimeout(() => {
this.workday = ['2018-8-25', '2018-8-26', '2018-8-27']
this.restday = ['2018-8-22', '2018-8-23', '2018-8-24']
this.data = [
'¥1999',
{ text: '¥2018', bgcolor: 'lightgreen' },
'', '', '', '',
{ highlight: true, text: '¥666', bgcolor: 'gold' },
{ highlight: true, text: '¥888' }, '', '',
{ disabled: true, bgcolor: 'red', dec: 'Repairing' }
]
}, 2000)
}
}