# HolidayPicker 节假日设置

<h-holiday-picker
  :holidayList.sync="currentHolidayList"
  @dateClick="dateClickHandler"
  @dateChange="dateChangeHandler"
></h-holiday-picker>

<script>
  export default {
    name: 'holiday-picker-page',
    data() {
      return {
        currentHolidayList: ['2019-03-05']
      };
    },
    methods: {
      dateClickHandler({ dateItem, holidayList }) {
        console.log(dateItem);
        console.log(holidayList);
      },
      currentDateChangeHandler(holidayList) {
        console.log(holidayList);
      }
    }
  };
</script>

<h-holiday-picker :holidayList.sync="currentHolidayList2">
  <template slot-scope="scope">
    <div class="date-info">
      <!-- 日期信息 -->
      <span class="custom-date">
        自定义内容
        <br />
        阴历：{{ scope.item && scope.item.lunarDate.fmtStr }}
        <br />
        阳历：{{ scope.item && scope.item.date.getDate() }}
      </span>
    </div>
    <div class="festival-info">
      <!-- 节假日信息 -->
      <span class="festival">
        {{ scope.item && (scope.item.lunarDate.festival ||
        scope.item.lunarDate.Term) }}
      </span>
    </div>
    <div class="status">
      <!-- 当前状态信息 -->
      <span v-if="scope.item.isHoliday">自定义已选中</span>
      <span v-else>自定义未选中</span>
    </div>
  </template>
</h-holiday-picker>
<script>
  export default {
    name: 'holiday-picker-page',
    data() {
      return {
        currentHolidayList2: []
      };
    }
  };
</script>