<template>
  <div class="page-datetime">
    <div class="page-title">日期选择器</div>
    <div class="page-body">
      <div class="container">
        <div class="container-title">基础用法</div>
        <cl-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-hour="minHour"
          :max-hour="maxHour"
          :min-date="minDate"
          :max-date="maxDate">
        </cl-datetime-picker>
      </div>
      <br>
      <div class="container">
        <div class="container-title">选择日期</div>
        <cl-datetime-picker
          v-model="currentDate1"
          type="date"
          :min-hour="minHour"
          :max-hour="maxHour"
          :min-date="minDate">
        </cl-datetime-picker>
      </div>
      <br>
      <div class="container">
        <div class="container-title">选择时间</div>
        <cl-datetime-picker
          v-model="currentDate2"
          type="time"
          :min-hour="minHour"
          :max-hour="maxHour"
          :min-date="minDate">
        </cl-datetime-picker>
      </div>
      <br>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      minHour: 10,
      maxHour: 20,
      minDate: new Date(),
      maxDate: new Date(2019, 10, 1),
      currentDate: new Date(2018, 0, 1),
      currentDate1: new Date(2018, 0, 1),
      currentDate2: '10:00'
    }
  },
  beforeCreate () {},
  created () {},
  mounted () {},
  watch: {},
  computed: {},
  methods: {},
  components: {

  }
}
</script>

<style scoped lang="scss">

 
</style>
