New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

@@ -0,0 +1,55 @@
:: BASE_DOC ::
## API
### DateTimePicker Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
auto-close | Boolean | false | \- | N
cancel-btn | String | 取消 | \- | N
confirm-btn | String | - | \- | N
custom-locale | String | zh | \- | N
end | String / Number | - | \- | N
filter | Function | - | Typescript`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
mode | String / Array | 'date' | Typescript`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
popup-props | Object | {} | popup properties。Typescript`PopupProps`[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
show-week | Boolean | false | \- | N
start | String / Number | - | \- | N
steps | Object | - | \- | N
title | String | - | title of picker | N
use-popup | Boolean | true | \- | N
value | String / Number | - | Typescript`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
default-value | String / Number | undefined | uncontrolled property。Typescript`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
visible | Boolean | false | \- | N
### DateTimePicker Events
name | params | description
-- | -- | --
cancel | \- | \-
change | `(value: DateValue)` | \-
close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(value: DateValue)` | `1.0.1`
pick | `(value: DateValue)` | \-
### DateTimePicker External Classes
className | Description
-- | --
t-class | \-
t-class-cancel | \-
t-class-confirm | \-
t-class-title | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-data-time-picker-year-width | 128rpx | -

View File

@@ -0,0 +1,109 @@
---
title: DateTimePicker 时间选择器
description: 用于选择一个时间点或者一个时间段。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-98%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-86%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/Am6VDimq73SP" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
#### 年月日选择器
{{ year-month-date }}
#### 年月选择器
{{ year-month }}
### 时间选择器器
包括:`时分秒``时分`两个示例
{{ time }}
#### 年月日时分秒选择器
{{ date-all }}
### 组件用法
#### 调整步数
{{ steps }}
#### 不使用 Popup
{{ without-popup }}
## API
### DateTimePicker Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
auto-close | Boolean | false | 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible | N
cancel-btn | String | 取消 | 取消按钮文字 | N
confirm-btn | String | - | 确定按钮文字 | N
custom-locale | String | zh | 组件国际化语言,目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
end | String / Number | - | 选择器的最大可选时间,默认为当前时间+10年 | N
filter | Function | - | 列选项过滤函数,支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型:`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值,[详细文档](https://day.js.org/docs/en/display/format) | N
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
mode | String / Array | 'date' | year = 年month = 年月date = 年月日hour = 年月日时; minute = 年月日时分当类型为数组时第一个值控制年月日第二个值控制时分秒。TS 类型:`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
show-week | Boolean | false | 【开发中】是否在日期旁边显示周几(如周一,周二,周日等) | N
start | String / Number | - | 选择器的最小可选时间,默认为当前时间-10年 | N
steps | Object | - | 时间间隔步数,示例:`{ minute: 5 }` | N
title | String | - | 标题 | N
use-popup | Boolean | true | 是否使用弹出层包裹 | N
value | String / Number | - | 选中值。TS 类型:`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
default-value | String / Number | undefined | 选中值。非受控属性。TS 类型:`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
visible | Boolean | false | 是否显示 | N
### DateTimePicker Events
名称 | 参数 | 描述
-- | -- | --
cancel | \- | 取消按钮点击时触发
change | `(value: DateValue)` | 确认按钮点击时触发
close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
pick | `(value: DateValue)` | 选中值发生变化时触发
### DateTimePicker External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-cancel | 取消样式类
t-class-confirm | 确认样式类
t-class-title | 标题样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-data-time-picker-year-width | 128rpx | -

View File

@@ -0,0 +1,75 @@
import type { Dayjs } from 'dayjs';
import { SuperComponent } from '../common/src/index';
declare enum ModeItem {
YEAR = "year",
MONTH = "month",
DATE = "date",
HOUR = "hour",
MINUTE = "minute",
SECOND = "second"
}
interface ColumnItemValue {
value: string | number;
label: string | number;
}
export default class DateTimePicker extends SuperComponent {
properties: import("./type").TdDateTimePickerProps;
externalClasses: string[];
options: {
multipleSlots: boolean;
};
observers: {
'start, end, value': () => void;
customLocale(v: any): void;
mode(m: any): void;
};
date: any;
data: {
prefix: string;
classPrefix: string;
columns: any[];
columnsValue: any[];
fullModes: any[];
locale: any;
dayjsLocale: any;
};
controlledProps: {
key: string;
event: string;
}[];
methods: {
updateColumns(): void;
getParseDate(): Dayjs;
getMinDate(): Dayjs;
getMaxDate(): Dayjs;
getDateRect(type?: string): any[];
getDate(): Dayjs;
clipDate(date: Dayjs): Dayjs;
setYear(date: Dayjs, year: number): Dayjs;
setMonth(date: Dayjs, month: number): Dayjs;
getColumnOptions(): any[];
getOptionByType(type: any): ColumnItemValue[];
getYearOptions(dateParams: any): ColumnItemValue[];
getOptionEdge(minOrMax: 'min' | 'max', type: any): any;
getMonthOptions(): ColumnItemValue[];
getDayOptions(): ColumnItemValue[];
getHourOptions(): ColumnItemValue[];
getMinuteOptions(): ColumnItemValue[];
getValueCols(this: DateTimePicker): {
columns: any;
columnsValue: any;
};
getColumnsValue(): string[];
getNewDate(value: number, type: ModeItem): Dayjs;
onColumnChange(e: WechatMiniprogram.CustomEvent): void;
onConfirm(): void;
onCancel(): void;
onVisibleChange(e: any): void;
onClose(e: any): void;
resetColumns(): void;
};
getFullModeArray(mode: any): any;
getFullModeByModeString(modeString: any, matchModes: any): any;
isTimeMode(): boolean;
}
export {};

View File

@@ -0,0 +1,369 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var _a, _b;
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import config from '../common/config';
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import dayjsLocaleMap from './locale/dayjs';
dayjs.extend(localeData);
dayjs.locale('zh-cn');
const defaultLocale = ((_a = dayjsLocaleMap[dayjs.locale()]) === null || _a === void 0 ? void 0 : _a.key) || ((_b = dayjsLocaleMap.default) === null || _b === void 0 ? void 0 : _b.key);
const { prefix } = config;
const name = `${prefix}-date-time-picker`;
var ModeItem;
(function (ModeItem) {
ModeItem["YEAR"] = "year";
ModeItem["MONTH"] = "month";
ModeItem["DATE"] = "date";
ModeItem["HOUR"] = "hour";
ModeItem["MINUTE"] = "minute";
ModeItem["SECOND"] = "second";
})(ModeItem || (ModeItem = {}));
const DATE_MODES = ['year', 'month', 'date'];
const TIME_MODES = ['hour', 'minute', 'second'];
const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
const DEFAULT_MIN_DATE = dayjs('2000-01-01 00:00:00');
const DEFAULT_MAX_DATE = dayjs('2030-12-31 23:59:59');
let DateTimePicker = class DateTimePicker extends SuperComponent {
constructor() {
super(...arguments);
this.properties = props;
this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
this.options = {
multipleSlots: true,
};
this.observers = {
'start, end, value': function () {
this.updateColumns();
},
customLocale(v) {
if (!v || !dayjsLocaleMap[v].key)
return;
this.setData({
locale: dayjsLocaleMap[v].i18n,
dayjsLocale: dayjsLocaleMap[v].key,
});
},
mode(m) {
const fullModes = this.getFullModeArray(m);
this.setData({
fullModes,
});
this.updateColumns();
},
};
this.date = null;
this.data = {
prefix,
classPrefix: name,
columns: [],
columnsValue: [],
fullModes: [],
locale: dayjsLocaleMap[defaultLocale].i18n,
dayjsLocale: dayjsLocaleMap[defaultLocale].key,
};
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.methods = {
updateColumns() {
this.date = this.getParseDate();
const { columns, columnsValue } = this.getValueCols();
this.setData({
columns,
columnsValue,
});
},
getParseDate() {
const { value, defaultValue } = this.properties;
const minDate = this.getMinDate();
const isTimeMode = this.isTimeMode();
let currentValue = value || defaultValue;
if (isTimeMode) {
const dateStr = dayjs(minDate).format('YYYY-MM-DD');
currentValue = dayjs(`${dateStr} ${currentValue}`);
}
const parseDate = dayjs(currentValue || minDate);
const isDateValid = parseDate.isValid();
return isDateValid ? parseDate : minDate;
},
getMinDate() {
const { start } = this.properties;
return start ? dayjs(start) : DEFAULT_MIN_DATE;
},
getMaxDate() {
const { end } = this.properties;
return end ? dayjs(end) : DEFAULT_MAX_DATE;
},
getDateRect(type = 'default') {
const map = {
min: 'getMinDate',
max: 'getMaxDate',
default: 'getDate',
};
const date = this[map[type]]();
const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
return keys.map((k) => { var _a; return (_a = date[k]) === null || _a === void 0 ? void 0 : _a.call(date); });
},
getDate() {
return this.clipDate((this === null || this === void 0 ? void 0 : this.date) || DEFAULT_MIN_DATE);
},
clipDate(date) {
const minDate = this.getMinDate();
const maxDate = this.getMaxDate();
return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
},
setYear(date, year) {
const beforeMonthDays = date.date();
const afterMonthDays = date.year(year).daysInMonth();
const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
return tempDate.year(year);
},
setMonth(date, month) {
const beforeMonthDays = date.date();
const afterMonthDays = date.month(month).daysInMonth();
const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
return tempDate.month(month);
},
getColumnOptions() {
const { fullModes, filter } = this.data;
const columnOptions = [];
fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
const columnOption = this.getOptionByType(mode);
if (typeof filter === 'function') {
columnOptions.push(filter(mode, columnOption));
}
else {
columnOptions.push(columnOption);
}
});
return columnOptions;
},
getOptionByType(type) {
var _a;
const { locale, steps } = this.data;
const options = [];
const minEdge = this.getOptionEdge('min', type);
const maxEdge = this.getOptionEdge('max', type);
const step = (_a = steps === null || steps === void 0 ? void 0 : steps[type]) !== null && _a !== void 0 ? _a : 1;
const dayjsMonthsShort = dayjs().locale(this.data.dayjsLocale).localeData().monthsShort();
for (let i = minEdge; i <= maxEdge; i += step) {
options.push({
value: `${i}`,
label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
});
}
return options;
},
getYearOptions(dateParams) {
const { locale } = this.data;
const { minDateYear, maxDateYear } = dateParams;
const years = [];
for (let i = minDateYear; i <= maxDateYear; i += 1) {
years.push({
value: `${i}`,
label: `${i + locale.year}`,
});
}
return years;
},
getOptionEdge(minOrMax, type) {
const selDateArray = this.getDateRect();
const compareArray = this.getDateRect(minOrMax);
const edge = {
month: [0, 11],
date: [1, this.getDate().daysInMonth()],
hour: [0, 23],
minute: [0, 59],
second: [0, 59],
};
const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
for (let i = 0, size = selDateArray.length; i < size; i += 1) {
if (types[i] === type)
return compareArray[i];
if (compareArray[i] !== selDateArray[i])
return edge[type][minOrMax === 'min' ? 0 : 1];
}
return edge[type][minOrMax === 'min' ? 0 : 1];
},
getMonthOptions() {
const months = [];
const minMonth = this.getOptionEdge('min', 'month');
const maxMonth = this.getOptionEdge('max', 'month');
const dayjsMonthsShort = dayjs.monthsShort();
for (let i = minMonth; i <= maxMonth; i += 1) {
months.push({
value: `${i}`,
label: dayjsMonthsShort[i],
});
}
return months;
},
getDayOptions() {
const { locale } = this.data;
const days = [];
const minDay = this.getOptionEdge('min', 'date');
const maxDay = this.getOptionEdge('max', 'date');
for (let i = minDay; i <= maxDay; i += 1) {
days.push({
value: `${i}`,
label: `${i + locale.day}`,
});
}
return days;
},
getHourOptions() {
const { locale } = this.data;
const hours = [];
const minHour = this.getOptionEdge('min', 'hour');
const maxHour = this.getOptionEdge('max', 'hour');
for (let i = minHour; i <= maxHour; i += 1) {
hours.push({
value: `${i}`,
label: `${i + locale.hour}`,
});
}
return hours;
},
getMinuteOptions() {
const { locale } = this.data;
const minutes = [];
const minMinute = this.getOptionEdge('min', 'minute');
const maxMinute = this.getOptionEdge('max', 'minute');
for (let i = minMinute; i <= maxMinute; i += 1) {
minutes.push({
value: `${i}`,
label: `${i + locale.minute}`,
});
}
return minutes;
},
getValueCols() {
return {
columns: this.getColumnOptions(),
columnsValue: this.getColumnsValue(),
};
},
getColumnsValue() {
const { fullModes } = this.data;
const date = this.getDate();
const columnsValue = [];
fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
columnsValue.push(`${date[mode]()}`);
});
return columnsValue;
},
getNewDate(value, type) {
let newValue = this.getDate();
switch (type) {
case ModeItem.YEAR:
newValue = this.setYear(newValue, value);
break;
case ModeItem.MONTH:
newValue = this.setMonth(newValue, value);
break;
case ModeItem.DATE:
newValue = newValue.date(value);
break;
case ModeItem.HOUR:
newValue = newValue.hour(value);
break;
case ModeItem.MINUTE:
newValue = newValue.minute(value);
break;
case ModeItem.SECOND:
newValue = newValue.second(value);
break;
default:
break;
}
return this.clipDate(newValue);
},
onColumnChange(e) {
const { value, column } = e === null || e === void 0 ? void 0 : e.detail;
const { fullModes, format } = this.data;
const columnValue = value === null || value === void 0 ? void 0 : value[column];
const columnType = fullModes === null || fullModes === void 0 ? void 0 : fullModes[column];
const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
this.date = newValue;
const { columns, columnsValue } = this.getValueCols();
this.setData({
columns,
columnsValue,
});
const date = this.getDate();
const pickValue = format ? date.format(format) : date.valueOf();
this.triggerEvent('pick', { value: pickValue });
},
onConfirm() {
const { format } = this.properties;
const date = this.getDate();
const value = format ? date.format(format) : date.valueOf();
this._trigger('change', { value });
this.triggerEvent('confirm', { value });
this.resetColumns();
},
onCancel() {
this.resetColumns();
this.triggerEvent('cancel');
},
onVisibleChange(e) {
if (!e.detail.visible) {
this.resetColumns();
}
},
onClose(e) {
const { trigger } = e.detail;
this.triggerEvent('close', { trigger });
},
resetColumns() {
const parseDate = this.getParseDate();
this.date = parseDate;
const { columns, columnsValue } = this.getValueCols();
this.setData({
columns,
columnsValue,
});
},
};
}
getFullModeArray(mode) {
if (typeof mode === 'string' || mode instanceof String) {
return this.getFullModeByModeString(mode, FULL_MODES);
}
if (Array.isArray(mode)) {
if ((mode === null || mode === void 0 ? void 0 : mode.length) === 1) {
return this.getFullModeByModeString(mode[0], FULL_MODES);
}
if ((mode === null || mode === void 0 ? void 0 : mode.length) === 2) {
const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
return [...dateModes, ...timeModes];
}
}
}
getFullModeByModeString(modeString, matchModes) {
if (!modeString) {
return [];
}
const endIndex = matchModes === null || matchModes === void 0 ? void 0 : matchModes.findIndex((mode) => modeString === mode);
return matchModes === null || matchModes === void 0 ? void 0 : matchModes.slice(0, endIndex + 1);
}
isTimeMode() {
const { fullModes } = this.data;
return fullModes[0] === ModeItem.HOUR;
}
};
DateTimePicker = __decorate([
wxComponent()
], DateTimePicker);
export default DateTimePicker;

View File

@@ -0,0 +1,8 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-picker": "../picker/picker",
"t-picker-item": "../picker-item/picker-item"
}
}

View File

@@ -0,0 +1,29 @@
<wxs src="../common/utils.wxs" module="_" />
<t-picker
style="{{_._style([style, customStyle])}}"
class="class {{prefix}}-class {{classPrefix}}"
visible="{{visible}}"
value="{{columnsValue}}"
header="{{header}}"
title="{{title}}"
auto-close="{{autoClose}}"
confirm-btn="{{confirmBtn || locale.confirm}}"
cancel-btn="{{cancelBtn || locale.cancel}}"
use-popup="{{usePopup}}"
popup-props="{{ popupProps }}"
bind:pick="onColumnChange"
bind:change="onConfirm"
bind:cancel="onCancel"
bind:visible-change="onVisibleChange"
bind:close="onClose"
>
<slot slot="header" name="header" />
<t-picker-item
wx:for="{{columns}}"
wx:key="index"
class="{{_.cls(classPrefix + '__item', [['roomly', columns.length > 5 && index == 0]])}}"
options="{{item}}"
index="index"
/>
<slot slot="footer" name="footer" />
</t-picker>

View File

@@ -0,0 +1,31 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-date-time-picker__item--roomly {
width: var(--td-data-time-picker-year-width, 128rpx);
flex: 0 0 var(--td-data-time-picker-year-width, 128rpx);
}

View File

@@ -0,0 +1,174 @@
import enLocale from 'dayjs/locale/en';
declare const _default: {
default: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
en: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
'zh-cn': {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
zh: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
'zh-tw': {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
tc: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
ko: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
kr: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
ja: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
ru: {
key: string;
label: string;
locale: enLocale.Locale;
i18n: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
};
};
export default _default;

View File

@@ -0,0 +1,74 @@
import enLocale from 'dayjs/locale/en';
import zhLocale from 'dayjs/locale/zh-cn';
import tcLocale from 'dayjs/locale/zh-tw';
import koLocale from 'dayjs/locale/ko';
import jaLocale from 'dayjs/locale/ja';
import ruLocale from 'dayjs/locale/ru';
import en from './en';
import zh from './zh';
import tc from './tc';
import ko from './ko';
import ja from './ja';
import ru from './ru';
export default {
default: {
key: 'zh-cn',
label: '简体中文',
locale: zhLocale,
i18n: zh,
},
en: {
key: 'en',
label: 'English',
locale: enLocale,
i18n: en,
},
'zh-cn': {
key: 'zh-cn',
label: '简体中文',
locale: zhLocale,
i18n: zh,
},
zh: {
key: 'zh-cn',
label: '简体中文',
locale: zhLocale,
i18n: zh,
},
'zh-tw': {
key: 'zh-tw',
label: '繁体中文',
locale: tcLocale,
i18n: tc,
},
tc: {
key: 'zh-tw',
label: '繁体中文',
locale: tcLocale,
i18n: tc,
},
ko: {
key: 'ko',
label: '한국어',
locale: koLocale,
i18n: ko,
},
kr: {
key: 'ko',
label: '한국어',
locale: koLocale,
i18n: ko,
},
ja: {
key: 'ja',
label: '日本語',
locale: jaLocale,
i18n: ja,
},
ru: {
key: 'ru',
label: 'русский',
locale: ruLocale,
i18n: ru,
},
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '',
month: '',
date: '',
hour: '',
minute: '',
second: '',
am: 'AM',
pm: 'PM',
confirm: 'confirm',
cancel: 'cancel',
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '年',
month: '月',
date: '日',
hour: '時',
minute: '分',
second: '秒',
am: '午前',
pm: '午後',
confirm: '確認',
cancel: 'キャンセル',
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '년',
month: '월',
date: '일',
hour: '시',
minute: '분',
second: '초',
am: '오전',
pm: '오후',
confirm: '확인',
cancel: '취소',
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '',
month: '',
date: '',
hour: '',
minute: '',
second: '',
am: 'до полудня',
pm: 'после полудня',
confirm: 'подтвердить',
cancel: 'отменить',
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '年',
month: '月',
date: '日',
hour: '時',
minute: '分',
second: '秒',
am: '上午',
pm: '下午',
confirm: '確定',
cancel: '取消',
};

View File

@@ -0,0 +1,13 @@
declare const _default: {
year: string;
month: string;
date: string;
hour: string;
minute: string;
second: string;
am: string;
pm: string;
confirm: string;
cancel: string;
};
export default _default;

View File

@@ -0,0 +1,12 @@
export default {
year: '年',
month: '月',
date: '日',
hour: '时',
minute: '分',
second: '秒',
am: '上午',
pm: '下午',
confirm: '确定',
cancel: '取消',
};

View File

@@ -0,0 +1,3 @@
import { TdDateTimePickerProps } from './type';
declare const props: TdDateTimePickerProps;
export default props;

View File

@@ -0,0 +1,73 @@
const props = {
autoClose: {
type: Boolean,
value: false,
},
cancelBtn: {
type: String,
value: '取消',
},
confirmBtn: {
type: String,
value: '',
},
customLocale: {
type: String,
value: 'zh',
},
end: {
type: null,
},
externalClasses: {
type: Array,
},
filter: {
type: null,
},
format: {
type: String,
value: 'YYYY-MM-DD HH:mm:ss',
},
header: {
type: Boolean,
value: true,
},
mode: {
type: null,
value: 'date',
},
popupProps: {
type: Object,
value: {},
},
showWeek: {
type: Boolean,
value: false,
},
start: {
type: null,
},
steps: {
type: Object,
},
title: {
type: String,
value: '',
},
usePopup: {
type: Boolean,
value: true,
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
},
visible: {
type: Boolean,
value: false,
},
};
export default props;

View File

@@ -0,0 +1,87 @@
import { PopupProps } from '../popup/index';
export interface TdDateTimePickerProps {
autoClose?: {
type: BooleanConstructor;
value?: boolean;
};
cancelBtn?: {
type: StringConstructor;
value?: string;
};
confirmBtn?: {
type: StringConstructor;
value?: string;
};
customLocale?: {
type: StringConstructor;
value?: string;
};
end?: {
type: null;
value?: string | number;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
};
filter?: {
type: undefined;
value?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
};
format?: {
type: StringConstructor;
value?: string;
};
header?: {
type: BooleanConstructor;
value?: boolean;
};
mode?: {
type: null;
value?: DateTimePickerMode;
};
popupProps?: {
type: ObjectConstructor;
value?: PopupProps;
};
showWeek?: {
type: BooleanConstructor;
value?: boolean;
};
start?: {
type: null;
value?: string | number;
};
steps?: {
type: ObjectConstructor;
value?: object;
};
title?: {
type: StringConstructor;
value?: string;
};
usePopup?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: null;
value?: DateValue;
};
defaultValue?: {
type: null;
value?: DateValue;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
}
export declare type DateTimePickerColumn = DateTimePickerColumnItem[];
export interface DateTimePickerColumnItem {
label: string;
value: string;
}
export declare type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
export declare type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
export declare type DateValue = string | number;