日历 Calendar

基本用法

<template lang="html">
    <main>
     <div class="demo-hidden">
       <za-panel>
         <za-panel-header title="简单日历"></za-panel-header>
         <za-panel-body>
           <za-cell title='选择时间' @click='showCal1'>{{value1.join(',')}}</za-cell>
         </za-panel-body>
       </za-panel>
       <za-panel>
          <za-panel-header title="时间范围选择"></za-panel-header>
          <za-panel-body>
            <za-cell title='选择时间范围' @click='showCal2'>{{value2.join(',')}}</za-cell>
          </za-panel-body>
        </za-panel>
        <za-panel>
          <za-panel-header title="时间最小最大限制"></za-panel-header>
          <za-panel-body>
            <za-cell title='选择时间范围' @click='showCal3'></za-cell>
          </za-panel-body>
        </za-panel>
     </div>
     <za-calendar :visible.sync='visible1' @changed='changeDate' @ok='handleOk1' :selected-value='value1' ></za-calendar>
     <za-calendar :visible.sync='visible2' @ok='handleOk2' :multi-selected='isMultiSelected' :selected-value='value2'></za-calendar>
     <za-calendar :visible.sync='visible3' :min='minDate' :max='maxDate' />
   </main>
</template>
<script>
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      value1: [],
      visible3: false,
      minDate: new Date('2018-01-11'),
      maxDate: new Date('2018-10-10'),
      value2: ['2018-02-24','2018-03-10'],
      isMultiSelected: true,
    }
  },
  methods: {
    showCal1() {
      this.visible1 = true;
    },
    showCal2() {
      this.visible2 = true;
    },
    showCal3() {
      this.visible3 = true;
    },
    changeDate(date) {
      console.log(date); // eslint-disable-line
    },
    handleOk1(date) {
      this.value1 = date;
      console.log(date); // eslint-disable-line
    },
    handleOk2(date) {
      this.value2 = date;
      console.log(date); // eslint-disable-line
    }
  },
};
</script>

API

Calendar Attributes

Calendar Events