FXUI

# FxTimePicker 时间选择器

移动端与PC端交互方式不同，故参数变动较多，移动端请直接参考底部移动端使用方式

用于选择或输入日期

# 固定时间点

提供几个固定的时间点供用户选择

使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长

<fx-time-select
  v-model="value"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</fx-time-select>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  }
</script>
显示代码 复制代码

# 任意时间点

可以选择任意时间

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

<template>
  <fx-time-picker
    v-model="value1"
    placeholder="任意时间点"
    @change="onChange">
  </fx-time-picker>
  <fx-time-picker
    arrow-control
    v-model="value2"
    :picker-options="{
       selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 06:00:00']
    }"
    placeholder="任意时间点">
  </fx-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        // value1: new Date(),
        // value1: '2020/2/12',
        value1:0,
        value2: new Date(2016, 9, 10, 18, 40)
      };
    },
    methods:{
      onChange(date){
        console.log('onChange...',date,this.value1,this.value1.getTime())
      }
    }
  }
</script>
显示代码 复制代码

# 固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

<template>
  <fx-time-select
    placeholder="起始时间"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </fx-time-select>
  <fx-time-select
    placeholder="结束时间"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </fx-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>
显示代码 复制代码

# 任意时间范围

可选择任意的时间范围

添加is-range属性即可选择时间范围，同样支持arrow-control属性。

<template>
  <fx-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </fx-time-picker>
  <fx-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </fx-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>
显示代码 复制代码

# Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 date(TimePicker) / string(TimeSelect) — —
readonly 完全只读 boolean — false
disabled 禁用 boolean — false
editable 文本框可输入 boolean — true
clearable 是否显示清除按钮 boolean — true
size 输入框尺寸 string medium / small / mini —
placeholder 非范围选择时的占位内容 string — —
start-placeholder 范围选择时开始日期的占位内容 string — —
end-placeholder 范围选择时开始日期的占位内容 string — —
is-range 是否为时间范围选择，仅对<fx-time-picker>有效 boolean — false
arrow-control 是否使用箭头进行时间选择，仅对<fx-time-picker>有效 boolean — false
align 对齐方式 string left / center / right left
popper-class TimePicker 下拉框的类名 string — —
picker-options 当前时间日期选择器特有的选项参考下表 object — {}
range-separator 选择范围时的分隔符 string - '-'
value-format 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 string 见日期格式 —
default-value 可选，选择器打开时默认显示的时间 Date(TimePicker) / string(TimeSelect) 可被new Date()解析(TimePicker) / 可选值(TimeSelect) —
name 原生属性 string — —
prefix-icon 自定义头部图标的类名 string — el-icon-time
clear-icon 自定义清空图标的类名 string — el-icon-circle-close

# Time Select Options

参数 说明 类型 可选值 默认值
start 开始时间 string — 09:00
end 结束时间 string — 18:00
step 间隔时间 string — 00:30
minTime 最小时间，小于该时间的时间段将被禁用 string — 00:00
maxTime 最大时间，大于该时间的时间段将被禁用 string — —

# Time Picker Options

参数 说明 类型 可选值 默认值
selectableRange 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] string / array — —
format 时间格式化(TimePicker) string 小时：HH，分：mm，秒：ss，AM/PM A 'HH:mm:ss'

# Events

事件名 说明 参数
change 用户确认选定的值时触发 组件绑定值
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

# Methods

方法名 说明 参数
focus 使 input 获取焦点 -

# 移动端 时间选择器

支持time 时分

# 使用指南
# 基础用法

visible参数挂上.sync语法糖后，组件会自主控制弹层的显示关闭，而不需要在cancel和confirm事件中控制。

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>
# 选择时间

type=='time'模式下，v-model为19:00字符串的格式（初始化时也可以传入Date类型）。

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
    :min-hour="9"
    :max-hour="20"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>
# 自定义选项格式

和大部分的date format函数原理类似，正则捕获对应的日期占位符然后把紧接着的字符串抽出来展示，对value值没有影响。

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
    format="yyyy,MM,dd,hh时,mm分"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>
# 单向数据流

其他picker没有支持单向数据流，建议使用方自己wrap一层来实现。

设置:value-binding="false"可以取消v-model的数据双向绑定（允许不传v-model），可以满足只监听confirm事件的场景。

# API
option description type acceptable values default
visible 控制展示关闭 Boolean false
v-model 选中值 Date|String --
min-date 日期可选最小值 Date 十年前的1月1日
max-date 日期可选最大值 Date 十年后的12月31日
min-hour 小时可选最小值 Number 0
max-hour 小时可选最大值 Number 23
format 展示格式，逗号分隔 String yyyy年,MM月,dd日,hh,mm
item-height 选项高度，单位为px Number 36
visible-item-count 同时可见item的数量 Number 7
value-binding 是否启用value的双向绑定，倘若为false，可以实现v-model单向传递 Boolean true
cancel-btn-text 取消按钮的文案 String 取消
confirm-btn-text 确定按钮的文案 String 确定
class-name 弹出层的根节点class String --
# Events
event description params
cancel 点击取消 --
confirm 点击确定 value
update:visible 弹层开启关闭时触发 visible
# API

除了包含Datetime Picker的API之外，还有以下列出的：

option description type acceptable values default
show-toolbar 是否展示头部操作栏 Boolean true
prevent-click 由于点击项时选中的pageY是以picker固定定位在底部为基准的，若picker位置不在页面底部，请关闭click事件 Boolean false
lastUpdate: 5/3/2023, 11:40:26 PM

← 日期选择器 →