date-time 仿阿里云时间选择器（齐思博）
基础用法
value 枚举值：[ { label: '1分钟', value: '1min' }, { label: '5分钟', value: '5min' }, { label: '15分钟', value: '15min' }, { label: '30分钟', value: '30min' }, { label: '1小时', value: '1h' }, { label: '4小时', value: '4h' }, { label: '1天', value: '1d' }, { label: '今天', value: 'today' }, { label: '昨天', value: 'yesterday' }, { label: '前天', value: 'beforeyesterday' }, { label: '1周', value: '1w' }, { label: '本周', value: 'thisweek' }, { label: '上周', value: 'lastweek' }, { label: '30天', value: '30d' }, { label: '本月', value: 'thismonth' }, { label: '上月', value: 'lastmonth' }, { label: '本季度', value: 'thisquarter' }, { label: '本年度', value: 'thisyear' } ] 可使用fnGetConTime方法获取所选时间，如：2025-02-26 12:12:12 ~ 2025-02-27 12:12:12 可使用fnInitTime方法刷新显示值
1d
时间选择日历中选择
整点时间将为您所选时间进行抹零取整
- 1分钟
- 5分钟
- 15分钟
- 30分钟
- 1小时
- 4小时
- 1天
- 今天
- 昨天
- 前天
- 1周
- 本周
- 上周
- 30天
- 本月
- 上月
- 本季度
- 本年度
- 自定义
历史记录 >
<template>
<div style="padding:15px;height:400px;text-align: right;">
<h-date-time ref="hddatetimeRef" buttonText="查询" :defaultValue="['1d']" @confirm="fnSearchDate"></h-date-time>
</div>
</template>
<script setup>
import {
ref
} from 'vue';
const hddatetimeRef = ref(null); // 获取下拉菜单元素的引用
const fnSearchTime = () => {
if (hddatetimeRef.value) {
console.log(hddatetimeRef.value.fnGetConTime())
}
}
const fnSearchDate = (date) => {
console.log(date)
}
</script>Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| buttonText | 时间选择框按钮文案 | string | — | 确定 |
| defaultValue | 初始默认时间 | array | 数组中可传一个上方枚举值获取，两个时间如：['2025-02-26 12:12:12', '2025-02-27 12:12:12'] | ['1h'] |
| modelObj | 设置时间 | object | 参考confirm方法数据格式 | - |
| pallist | 快捷选项 | array | [ |
'1min',
'5min',
'15min',
'30min',
'1h',
'4h',
'1d',
'today',
'yesterday',
'beforeyesterday',
'1w',
'thisweek',
'lastweek',
'30d',
'thismonth',
'lastmonth',
'thisquarter',
'thisyear',
'custom'
] | 全部 |
Events
| 方法名 | 说明 | 参数 |
|---|---|---|
| copysuccess | 历史记录复制成功回调 | 无 |
| confirm | 时间选择后回调 | { |
timevalue: ['1d'], // 参考default数据格式
timeinput: '', // 具体时间段，如：2025-02-26 12:12:12 ~ 2025-02-27 12:12:12
cusnum: 15, // 选择自定义时：数值
custype: 1, // 选择自定义时：类型 0-秒，1-分钟，2-小时，3-天
} |