<template>
    <div class="content">
        <e-row :gutter="24">
            <!-- 固定时间点 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>固定时间点</span>
                    </div>
                    <div>
                        <e-time-select
                            v-model="value"
                            :picker-options="{
                                start: '08:30',
                                step: '00:15',
                                end: '18:30'
                            }"
                            placeholder="选择时间">
                        </e-time-select>
                    </div>
                </e-card>
            </e-col>
            <!-- 任意时间点 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>任意时间点</span>
                    </div>
                    <div>
                        <div class="block">
                        <el-time-picker
                            v-model="value1"
                            :picker-options="{
                            selectableRange: '18:30:00 - 20:30:00'
                            }"
                            placeholder="任意时间点">
                        </el-time-picker>
                        </div>
                        <div class="block">
                        <el-time-picker
                            arrow-control
                            v-model="value2"
                            :picker-options="{
                            selectableRange: '18:30:00 - 20:30:00'
                            }"
                            placeholder="任意时间点">
                        </el-time-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 固定时间范围 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>固定时间范围</span>
                    </div>
                    <div>
                        <div class="block">
                            <e-time-select
                                placeholder="起始时间"
                                v-model="startTime"
                                :picker-options="{
                                start: '08:30',
                                step: '00:15',
                                end: '18:30'
                                }">
                            </e-time-select>
                        </div>
                        <div class="block">
                            <e-time-select
                                placeholder="结束时间"
                                v-model="endTime"
                                :picker-options="{
                                start: '08:30',
                                step: '00:15',
                                end: '18:30',
                                minTime: startTime
                                }">
                            </e-time-select>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 任意时间范围 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>任意时间范围</span>
                    </div>
                    <div>
                        <div class="block">
                            <el-time-picker
                                is-range
                                v-model="value3"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </div>
                        <div class="block">
                            <el-time-picker
                                is-range
                                arrow-control
                                v-model="value4"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            value: '',
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40),
            startTime: '',
            endTime: '',
            value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
