ele学习 时间日期选择器

TimePicker 时间选择器

基本用法

通过设置start,end,step来固定一系列时间范围

<template>
    <div class="timepicker">
      <el-row :gutter="10">
          <el-col :span="8" :offset="0">
            <el-time-select v-model="value"
            :picker-options="{
              start: '08:30',
              end: '24:00',
              step: '00:15'
            }">
            </el-time-select>
          </el-col>
      </el-row>
    </div>
</template>
<script>
    export default {
        name: "cascader",
        data(){
          return {
            value : ''
          }
    }
  }
</script>
<style>
</style>

任意时间

使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

<el-col :span="8" :offset="0">
            <el-time-picker v-model="value"
            :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
            }">
            </el-time-picker>
</el-col>

设置开头时间

通过设置minTime属性来限制开始时间

DatePicker 日期选择器

基本用法

以「日」为基本单位，基础的日期选择控件

<template>
    <div class="timepicker">
      <el-row :gutter="10">
          <el-col :span="12">
            <el-date-picker v-model="value">

            </el-date-picker>
          </el-col>
      </el-row>
    </div>
</template>
<script>
    export default {
        name: "cascader",
        data(){
          return {
            value : ''
          }
    }
  }
</script>
<style>
</style>

可以加上datetime 使得可以选择时间

感觉到这就够用了 其他歪门的就不学了