vue-datepicker-mobile

v2

中文版

Live Demo

Props

param	description	type	default
custom	custom data.*	[object, array]	-
endText	text of end for selected	string	'离店'
initDate	Init position for visible month.Allow a string of date,default is this month.	string	today
initLength	Init render length from init-date.	number	6
loadLength	scroll load render length every time.	number	6
mondayFirst	Whether Monday is the first-day as a week, default for Sunday.	boolean	true
selectArea	area for allow user choose date. e.g.['2019-05-01', '2019-08-02']	array	-
selected	select some area. Ibid.	array	-
single	select single date.default select a range.	boolean	false
startText	text of beginning for selected	string	'入住'
cancelText	text for cancel button	string	'取消'
confirmText	text for confirm button	string	'确认'
visible	display state, show or hide datepicker window.	boolean	false
weekTexts	texts array of week name	array	['一', '二', '三', '四', '五', '六', '日']

* 注

// 当key为月份如：'2019-05'时，value则为从当月1日开始的数据序列。可接受多个月份（多个key）
{
  '2019-04': [{custom1},{custom2},{custom29},{custom30}]
  '2019-05': [{custom1},{custom2},{custom30},{custom31}]
}

// 当key为具体日期如：'2019-05-20'时，value为从该日起的数据序列，自动往下一个月添加超出的数据
{
  '2019-04-09': [{custom1},{custom2},{custom29},{custom30},{custom99},{custom100},{custom2xx},{custom3xx}]
}

// 直接传入一个数组，相当于上面的key为当日
[{custom1},{custom2},{custom29},{custom30},{custom99},{custom100},{custom2xx},{custom3xx}]

custom

param	description	type
bgc	background color	string
disabled	disabled status	boolean
color	color of text	string
info	display texts	[string, object, array]

info

param	description	type
text	display text	string
color	color of text	string

this color priority great than custom.color

full e.g.

[
  {
    bgc: '#abc',
    disabled: true,
    color: 'red',
    info: 'full'
  },
  {
    bgc: 'rgb(255,0,100)',
    info: ['001', '002']
  },
  {
    bgc: 'hsl(100,100%,50%)',
    color: 'rgba(99, 99, 99, .9)',
    info: { text: '007', color: 'hsla(60, 50%, 70%, .6)' }
  }
]

Event

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

start: {
  date: new Date(), // current day
  data: {
    disabled: false,
    custom: {} // custom object
  }
}

cancel()

Called when click cancel button.

confirm({ start, end, range })

Called when click confirm button.

disable(date)

Called after selected a date has custom.disabled.date is a Object Of Date.

viewport(month)

Called when somemonth in viewport with window, return current month.

month: {
  date: new Date(), // this month
  days: [date1, date2, date29, date30] // all days for this month
}

Instructions

simple

<aki-date :visible="visible" @confirm="confirmHandler" @cancel="visible=false" />

Description

This project used Intersection Observer API

• Caniuse
• Polyfill

Thanks

date-utils