日历 Calendar

简单日历

<za-cell title="multiple">
  <za-select v-model="multiple" @ok="handleChange" :data-source="multipleOptions">
</za-select></za-cell>
<za-cell title="min">
  <za-date-select v-model="min" title="选择日期" placeholder="请选择日期" mode="date" format="yyyy-MM-dd" max="2030-10-25" min="1917-10-25">
  </za-date-select>
</za-cell>
<za-cell title="max">
  <za-date-select v-model="max" title="选择日期" placeholder="请选择日期" mode="date" format="yyyy-MM-dd" max="2030-10-25" min="1917-10-25">
  </za-date-select>
</za-cell>
<za-calendar v-model="value" @change="change" :multiple="multiple == '1'" :date-render="dateRender" :disabled-date="disabledDate" :min="min" :max="max">

Vue Script

<script name="vue">
export default {
  data() {
    return {
      min: "2018-01-06",
      max: "2018-10-02",
      value: ['2018-01-10', '2018-03-20'],
      multiple: "1",
      multipleOptions: [
        { value: '1', label: "true" },
        { value: '0', label: "false" }
      ]
    }
  },
  methods: {
    change(date) {
      console.log('change:' + date);
    },
    handleChange(val) {
      this.multiple = val.value;
    },
    disabledDate(date) {
      if (/(0|6)/.test(date.getDay())) {
        return true;
      }
    },
    dateRender(date) {
      const h = this.$createElement;
      if (/(6)/.test(date.getDate())) {
        return h('za-badge', { props: { theme: 'primary', sup: true, shape: 'dot' }}, date.getDate());
      }
      return h('span', date.getDate());
    }
  },
  watch: {
    value(val) {
      console.log('watch:' + val);
    }
  }
};
</script>

API

Calendar Attributes

Calendar Events