HIPS-UNI-UI

# DatetimePicker 时间选择器

import DatetimePicker from '@hips/uni-ui/lib/datetime-picker';

export default {
  components: {
    'hips-datetime-picker': DatetimePicker,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-datetime-picker
  title="时间选择器"
  type="date"
  format="yyyy-MM-dd"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
export default {
  data() {
    return {};
  },
  methods: {
    handleConfirm(res) {
      console.log('handleConfirm res = ', res);
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 选择时间

<hips-datetime-picker title="选择时分秒" type="time" @confirm="handleConfirm" />

<hips-datetime-picker
  title="选择时分"
  type="timeshort"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
7
export default {
  data() {
    return {};
  },
  methods: {
    handleConfirm(res) {
      console.log('handleConfirm res = ', res);
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 选择日期和时间

<hips-datetime-picker
  title="选择年月日时分秒"
  type="datetime"
  @confirm="handleConfirm"
/>

<hips-datetime-picker
  title="选择年月日时分"
  type="datetimeshort"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
7
8
9
10
11
export default {
  data() {
    return {};
  },
  methods: {
    handleConfirm(res) {
      console.log('handleConfirm res = ', res);
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 设定起始时间

<hips-datetime-picker
  title="选择年月日时分秒"
  type="datetime"
  start-date="2010/08/11"
  end-date="2025/07/09"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6
7
export default {
  data() {
    return {};
  },
  methods: {
    handleConfirm(res) {
      console.log('handleConfirm res = ', res);
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# 隐藏顶部栏

<hips-datetime-picker
  title="时间选择器"
  type="date"
  :show-toolbar="false"
  @confirm="handleConfirm"
/>
1
2
3
4
5
6

# 使用 title 插槽

注意

title 插槽 会覆盖 title 属性的赋值

<hips-datetime-picker
  :picker-datas="dataSet1"
  @confirm="handleConfirm"
  @click-title="handleClickTitle"
>
  <a slot="title" style="color: red">clear</a>
</hips-datetime-picker>
1
2
3
4
5
6
7

# API

参数 说明 类型 默认值
show-toolbar 是否显示顶部栏 Boolean true
title 顶部栏标题 String ''
confirm-text 确认按钮文字 String 确认
cancel-text 取消按钮文字 String 取消
item-height 选项高度 Number 40
selected-value 默认日期 String -
type 选择的类型 String datetime
format 返回值格式 String yyyy-MM-dd
start-date 开始日期 String -
end-date 开始日期 String -

注意

  1. selected-value 表示默认值
  2. type 可选类型有 [date, time, timeshort, datetime, datetimeshort]，分别对应的格式为 [yyyy-MM-dd, hh:mm:ss, hh:mm, yyyy-MM-dd hh:mm:ss, yyyy-MM-dd hh:mm]
  3. format 对返回值进行格式化，可选值 [yyyy-MM-dd, yyyy/MM/dd]，格式化区别仅在于年月日的间隔，对时分秒没有影响

# Event

事件名 说明 参数
confirm 点击完成按钮时触发 选择结果
cancel 点击取消按钮时触发 -
click-title 点击 title 区域时触发 -

# Slot

名称 说明
title 自定义 picker 工具栏 title 的显示内容，插槽会覆盖 title 属性的传值

# 样式变量

变量名 说明 默认值
datetime-picker-toolbar-height 80rpx
datetime-picker-toolbar-border-color #eeeeee
datetime-picker-title-color #666666
datetime-picker-title-font-size 32rpx
datetime-picker-button-bg-color white
datetime-picker-button-active-bg-color #e8e8e8
datetime-picker-button-confirm-color #1F8CEB
datetime-picker-button-cancel-color #999999

注意

Circle 环形进度条