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

基本用法

日期选择（不带默认日期）

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

日期区间选择（有默认日期）

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

日期区间选择（不限制开始结束时间）

  1. html
    <nut-calendar 
  2.     :is-visible.sync="isVisible3"
  3.     :default-value="date3"
  4.     type="range"
  5.     :start-date="null"
  6.     :end-date="null"
  7.     :animation="`nutSlideUp`"
  8.     @close="switchPickerClose('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
  14.         };
  15.     },
  16.     methods: {
  17.         switchPickerClose(param){
  18.             console.log('close:' + param)
  19.         },
  20.         switchPicker(param) {
  21.             this[`${param}`] = true;
  22.         },
  23.         setChooseValue(param) {
  24.             this.date = param[3];
  25.             this.dateWeek = param[4];
  26.         },
  27.         setChooseValue1(param) {
  28.             this.date1 = [...[param[0][3],param[1][3]]];
  29.         },
  30.         setChooseValue2(param) {
  31.             this.date2 = param[3];
  32.         },
  33.         setChooseValue3(param) {
  34.             this.date3 = [...[param[0][3],param[1][3]]];
  35.         }
  36.     }
  37. };

Prop

字段说明类型默认值
type类型，日期选择’one’，区间选择’range’String‘one’
isVisible是否可见（注意：绑定时必须:is-visible.sync,加sync修饰符）Booleanfalse
animation日历进入方向，右滑’nutSlideRight’， 上拉’nutSlideUp’String‘nutSlideRight’
isAutoBackFill是否自动回填Booleanfalse
isOpenRangeSelect是否开启区间选择Booleanfalse
title显示标题String‘选择日期’
defaultValue默认值，日期选择String格式，区间选择Array格式String
startDate开始日期， 如果不限制开始日期传nullString今天
default结束日期，如果不限制结束日期传nullString距离今天五个月

Event

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

Calendar 日历 - 图1