<!-- 
 * @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="datetime"
           placeholder="请选择" 
           ></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-rrf-date-picker
            v-model="datetime"
            @change="changeblur"
            type="date"
            placeholder="选择日期">
         </el-rrf-date-picker>
          <el-rrf-date-picker
            disabled
            v-model="value4"
            type="date"
            placeholder="选择日期">
          </el-rrf-date-picker>
      </div>
      <div class="button-item">
          <p>date-pcik-range</p>
          <el-rrf-date-picker
            v-model="value5"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-rrf-date-picker>
          <el-rrf-date-picker
            v-model="value6"
            disabled
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-rrf-date-picker>
      </div>
  </div>
</template>

<script>
import ElTimeSelect from "pkgs/RfTimeSelect/src";
import ElTimePicker from "pkgs/RfTimePicker/src";
import ElRrfDatePicker from "pkgs/RfDatePicker/src";
export default {
    components: {
        ElTimeSelect,
        ElTimePicker,
        ElRrfDatePicker
    },
    data() {
        return {
            datetime: '',
            form:{
                datetime: ''
            },
            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: {
        changeblur(e) {
            console.log("form.datetime========",this.datetime) 
            console.log("changeblur========",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>