Calendar 日期选择

日期选择组件通常与遮罩层组件配合使用，用于选择日期或日期范围

使用指南

import { Calendar } from 'fs-ui'
export default {
  components: {
    Calendar
  }
}

1
2
3
4
5
6

代码演示

选择单个时间

<fs-calendar
  :show.sync="show"
  @changeStartTime="startTime = $event"/>

1
2
3

选择时间范围(起始时间)

<fs-calendar 
  :show.sync="show" 
  :isTimeRange="true"
  @change-start-time="startTime = $event" 
  @change-end-time="endTime = $event"/>

1
2
3
4
5

选择时间限制(20天以内)

<fs-calendar
  :show.sync="show"
  :isTimeRange="true"
  :numberDay="20"
  @changeStartTime="startTime = $event"
  @changeEndTime="endTime = $event"/>

1
2
3
4
5
6

export default {
  data () {
    return {
      startTime: '2018-10-12',
      endTime: '2018-12-21',
      show: false,
    }
  },
  computed: {
    formatTime () {
      return this.startTime && this.endTime ? `${this.startTime}——${this.endTime}` : ''
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

自动连选

  <fs-calendar
    :show.sync="show"
    :disabledDate="disabledDate"
    :today="{show: true, text: '今天'}"
    :extraDay="{day: '2019-06-09', text: '首单'}"
    :isTimeRange="true"
    :autoRange="true"
    @changeStartTime="startTime = $event"
    @changeEndTime="endTime = $event"/>

1
2
3
4
5
6
7
8
9

export default {
  data () {
    return {
      startTime: '',
      endTime: '',
      show: false,
    }
  },
  computed: {
    formatTime () {
      return this.startTime && this.endTime ? `${this.startTime}——${this.endTime}` : ''
    }
  },
  methods: {
    disabledDate (timeStamp) {
      return timeStamp > +new Date()
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

参数

参数	说明	类型	默认值
start	起始时间(如果只有一个则为时间传入值)	String
end	结束时间	String
show	是否显示弹框	Boolean	false
isTimeRange	是否选择时间范围	Boolean	false
numberDay	时间选择限制	Number	0
autoclose	是否自动关闭,只有 isTimeRange为false时有效	Boolean	false
autoRange	是否自动选择起始时间，isTimeRange为true时有效	Boolean	false
disabledDate	禁止选择日期，返回true即禁止选择	Function	-
extraDay	特殊的日期,例如 {day: '2019-06-09', text: '首单'}	Object	-
today	今天，格式 {show: true, text: '今天'}	Object	-

事件

事件	说明	回调参数
change-start-time	开始时间变化时返回	-
change-end-time	结束时间变化时返回	-
confirm	确定事件	{ start, end }
cancel	取消事件	-

← Picker 级联选择