aki-datepicker v2.1.7

vue-datepicker-mobile

v2

中文版

Live Demo

Props

* 注

// 当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

info

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