<!-- 
 * @description: 
 * @fileName: index.vue 
 * @author: lh 
 * @date: 2021-08-05 19:11:55 
 * @后台人员:  
 * @path:  
 * @version: V1.0.5 
!-->
<template>
  <div class="page-container">
      <div class="button-item">
          <p>time-select</p>
          <el-time-select
           v-model="value"
           :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
            }"
            placeholder="选择时间"
           >
          </el-time-select>
           <el-time-select
           disabled
           v-model="value"
           placeholder="请选择" 
           @input="handleInput1"
           @focus="handlefocus1"
           @change="handleChange1"
           @blur="handleblur1"
           @clear="handleClear1"
           ></el-time-select>
      </div>
       <div class="button-item">
          <p>time-picker</p>
          <el-time-picker
            v-model="value1"
            :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
            }"
            placeholder="任意时间点">
           </el-time-picker>
           <el-time-picker
            disabled
            v-model="value1"
            :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
            }"
            placeholder="任意时间点">
           </el-time-picker>
      </div>
      <div class="button-item">
          <p>time-picker-range</p>
           <el-time-picker
            is-range
            v-model="value3"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
          <el-time-picker
            is-range
            disabled
            v-model="value3"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
      </div>
      <div class="button-item">
          <p>date-pciker</p>
          <el-date-picker
            v-model="value4"
            type="date"
            placeholder="选择日期">
         </el-date-picker>
          <el-date-picker
            disabled
            v-model="value4"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
      </div>
      <div class="button-item">
          <p>date-pcik-range</p>
          <el-date-picker
            v-model="value5"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-date-picker
            v-model="value6"
            disabled
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
      </div>
  </div>
</template>

<script>
import ElTimeSelect from "pkgs/RfTimeSelect/src";
import ElTimePicker from "pkgs/RfTimePicker/src";
import ElDatePicker from "pkgs/RfDatePicker/src";
export default {
    components: {
        ElTimeSelect,
        ElTimePicker,
        ElDatePicker
    },
    data() {
        return {
            
            value: '',
            value1: new Date(2016, 9, 10, 18, 40),
            value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            value4: '',
            value5: '',
            value6: '',
            required: {
                    visible: true,
                    showRequiredError: true,
                    labelStyle: {
                        width: '70px'
                    },
                    label: '姓名姓名' 
            },
        }
    },
    methods: {
        handleInput1(e) {
            console.log("handleInput1========",e)
        },
        handleInput2(e) {
            console.log("handleInput2======",e)
        },
        handlefocus1(e) {
            console.log("handlefocus1========",e)
        },
        handlefocus2(e) {
            console.log("handlefocus2========",e)
        },
        handleChange1(e) {
            console.log("handleChange1========",e)
        },
        handleChange2(e) {
            console.log("handleChange2========",e)
        },
        handleblur1(e) {
            console.log("handleblur1========",e)
        },
        handleblur2(e) {
            console.log("handleblur2========",e)
        },
        handleClear1(e) {
            console.log("handleClear1========",e)
        },
        handleClear2(e) {
            console.log("handleClear2========",e)
        }
    }
}
</script>

<style lang="css" scoped>
    .page-container{
        display: flex;
        flex-direction: column;
    }
    .page-container .button-item{
        margin: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>