vue日期选择器 移动端_适用于vue2的移动友好日期选择器

vue日期选择器 移动端

vue-datepicker-mobile (vue-datepicker-mobile)

A calendar friendly for mobile, which can select the date by the range, friendly for mobile.It is typically used for hotel.

适用于移动设备的日历，可以按范围选择日期，适合移动设备。通常用于酒店。

TODO：* is bugs.it can't use async data.It's repairing.

TODO：*是bug。不能使用异步数据。正在修复。

View demo 查看演示 Download Source 下载源

Attr (Attr)

param	description	type	defalut
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

参数	描述	类型	违约
自动完成	选择是否自动完成日期后，如果设置为false，将显示确认按钮。	布尔值	假
星期一第一	星期一是否为一周的第一天，默认为星期日。	布尔值	假
reverseSelect	是否允许反向选择日期。	布尔值	假

Struts (Prop)

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	-
customData*	custom data.display custom text on date,and optional highlight.	array	-

参数	描述	类型	违约
显示	显示状态，显示或隐藏日期选择器窗口。	布尔值	假
displayRange	单位是月	数	13
displayRangeStart	显示开始月份。默认是这个月 例如'2018-9-1'	串	--
selectRangeStart	可以选择开始日期。默认为今天。	串	--
selectRangeEnd	可以选择结束日期。 默认显示结尾。	串	--
休息日*	自定义restday.default高亮显示并显示中文“休”。例如['2019.5.1', '2019.5.2', '2019.5.3']	数组	--
工作日*	自定义restday.default高亮显示并显示中文“班”。例如['2019.5.4', '2019.5.5']	数组	--
customData *	自定义数据。在日期上显示自定义文本，以及可选的突出显示。	数组	--

customData * (customData*)

Data will use today as index to 0, one by one add to after the date.

今天的数据将用作0的索引，在日期之后一一加。

If value's type is string, it will show as text.['￥100']

如果值的类型是字符串，它将显示为文本。 ['￥100']

If you need to show highlight, you need a object.[{ highlight: true, text: '￥100' }]

如果需要显示突出显示，则需要一个对象。 [{ highlight: true, text: '￥100' }]

大事记 (Events)

select({ start, end, range }) (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.

在选择日期范围之后调用。开始：对象，结束：对象，范围：[对象]。 range是一个选定的数组，不包含start和end。如果start和end之间没有空格，则range是一个null数组。

目的 (object)

Selected date object 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
customData	custom data{ highlight: boolean, text: string }	object
begin	Whether selected date start	boolean
active	Whether selected date between start and end	boolean
end	Whether selected date end	boolean

参数	描述	类型
年	年	数
月	月	数
天	日期	数
日期	全日期YYYY-MD	串
大馆	全日期YYYY-MM-DD	串
休息	是否休息日包括不是工作日的周末和自定义的休息日。	布尔值
休息日	是否自定义休息日	布尔值
工作日	是否自定义工作日	布尔值
残障人士	是否禁用	布尔值
customData	自定义数据{ highlight: boolean, text: string }	目的
开始	所选日期是否开始	布尔值
活性	是否在开始和结束之间选择日期	布尔值
结束	所选日期是否结束	布尔值

cancle() (cancle())

After cancle, it used to hide datepicker window.

在cancle之后，它用来隐藏日期选择器窗口。

二手演示 (used demo)

-

import DatePicker from './DatePicker'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      startDate: '',
      endDate: '',
      start: '2018-6-1',
      restday: [],
      workday: ['2018-9-29', '2018-9-30'],
      data: ['￥1300', '￥1345', { highlight: true, text: '￥888' }],
      show: true
    }
  },
  methods: {
    select({ start, end, range }) {
      this.startDate = start.odate
      this.endDate = end.odate
      console.log('range', range)
      this.show = false
    },
    cancle() {
      this.show = false
    }
  },
  created() {
    // async data does't work on current version.
    setTimeout(() => {
      this.restday = ['2018-9-22', '2018-9-23', '2018-9-24']
    }, 2000)
  }
}

翻译自: https://vuejsexamples.com/a-mobile-friendly-datepicker-for-vue2/

vue日期选择器 移动端