Calendar 日历请使用手机扫码体验

基本用法

日期选择(不带默认日期)

  1. html
    <nut-calendar
  2. :is-visible="isVisible"
  3. :default-value="date"
  4. @close="switchPicker('isVisible')"
  5. @choose="setChooseValue"
  6. :start-date="`2018-10-11`"
  7. :end-date="`2020-11-11`"
  8. >
  9. </nut-calendar>

日期选择(有默认日期,选择后自动回填)

  1. html
    <nut-calendar
  2. :is-visible="isVisible2"
  3. :default-value="date2"
  4. :is-auto-back-fill="true"
  5. @close="switchPicker('isVisible2')"
  6. @choose="setChooseValue2"
  7. >
  8. </nut-calendar>

日期区间选择(有默认日期)

  1. html
    <nut-calendar
  2. :is-visible="isVisible1"
  3. :default-value="date1"
  4. type="range"
  5. @close="switchPicker('isVisible1')"
  6. @choose="setChooseValue1"
  7. >
  8. </nut-calendar>

日期区间选择(不限制开始结束时间)

  1. html
    <nut-calendar
  2. :is-visible="isVisible3"
  3. :default-value="date3"
  4. type="range"
  5. :start-date="null"
  6. :end-date="null"
  7. :animation="`nutSlideUp`"
  8. @close="switchPicker('isVisible3')"
  9. @choose="setChooseValue3"
  10. >
  11. </nut-calendar>
  1. javascript
    export default {
  2. data() {
  3. return {
  4. isVisible: false,
  5. isVisible1: false,
  6. isVisible2: false,
  7. isVisible3: false,
  8. date: null,
  9. dateWeek: null,
  10. date1: ['2018-12-22', '2019-01-08'],
  11. date2: Utils.getDay(30), // 当前日期之后的30天
  12. date3: null
  13. };
  14. },
  15. methods: {
  16. switchPicker(param) {
  17. this[`${param}`] = !this[`${param}`];
  18. },
  19. setChooseValue(param) {
  20. this.date = param[3];
  21. this.dateWeek = param[4];
  22. },
  23. setChooseValue1(param) {
  24. this.date1 = [...[param[0][3],param[1][3]]];
  25. },
  26. setChooseValue2(param) {
  27. this.date2 = param[3];
  28. },
  29. setChooseValue3(param) {
  30. this.date3 = [...[param[0][3],param[1][3]]];
  31. }
  32. }
  33. };

Prop

字段说明类型默认值
type类型,日期选择'one',区间选择'range'String'one'
isVisible是否可见Booleanfalse
animation日历进入方向,右滑'nutSlideRight', 上拉'nutSlideUp'String'nutSlideRight'
isAutoBackFill是否自动回填Booleanfalse
isOpenRangeSelect是否开启区间选择Booleanfalse
title显示标题String‘选择日期’
defaultValue默认值,日期选择String格式,区间选择Array格式String
startDate开始日期, 如果不限制开始日期传nullString今天
default结束日期,如果不限制结束日期传nullString距离今天五个月

Event

字段说明回调参数
choose选择之后或是点击确认按钮触发日期数组(包含年月日和星期)
close关闭时触发-