project init & fix ui
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
### DateTimePicker Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
cancel-btn | String | 取消 | \- | N
|
||||
confirm-btn | String | - | \- | N
|
||||
custom-style `v0.25.0` | String | - | \- | N
|
||||
end | String / Number | - | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
|
||||
footer | Slot | true | \- | N
|
||||
format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
|
||||
header | Boolean / Slot | true | \- | 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
|
||||
show-week | Boolean | false | \- | N
|
||||
start | String / Number | - | \- | N
|
||||
title | String | - | title of picker | 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)` | \-
|
||||
confirm | `(value: DateValue)` | \-
|
||||
pick | `(value: DateValue)` | \-
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 日期选择器
|
||||
|
||||
#### 年月日选择器
|
||||
|
||||
{{ year-month-date }}
|
||||
|
||||
#### 年月选择器
|
||||
|
||||
{{ year-month }}
|
||||
|
||||
### 时间选择器器
|
||||
|
||||
包括：`时分秒`、`时分`两个示例
|
||||
|
||||
{{ time }}
|
||||
|
||||
#### 年月日时分秒选择器
|
||||
|
||||
{{ date-all }}
|
||||
|
||||
## API
|
||||
### DateTimePicker Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
cancel-btn | String | 取消 | 取消按钮文字 | N
|
||||
confirm-btn | String | - | 确定按钮文字 | N
|
||||
custom-style `v0.25.0` | String | - | 自定义组件样式 | N
|
||||
end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
|
||||
footer | Slot | true | 底部内容 | 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 不显示任何内容，值类型为 TNode 表示自定义头部内容 | 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
|
||||
show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
|
||||
start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
|
||||
title | String | - | 标题 | 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)` | 确认按钮点击时触发
|
||||
confirm | `(value: DateValue)` | 【开发中】确认按钮点击时触发
|
||||
pick | `(value: DateValue)` | 选中值发生变化时触发
|
||||
83
miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.d.ts
vendored
Normal file
83
miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker.d.ts
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
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;
|
||||
mode(m: any): void;
|
||||
};
|
||||
date: any;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
columns: any[];
|
||||
columnsValue: any[];
|
||||
fullModes: any[];
|
||||
locale: {
|
||||
year: string;
|
||||
month: string;
|
||||
date: string;
|
||||
hour: string;
|
||||
minute: string;
|
||||
second: string;
|
||||
am: string;
|
||||
pm: string;
|
||||
confirm: string;
|
||||
cancel: string;
|
||||
};
|
||||
};
|
||||
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;
|
||||
resetColumns(): void;
|
||||
};
|
||||
getFullModeArray(mode: any): any;
|
||||
getFullModeByModeString(modeString: any, matchModes: any): any;
|
||||
isTimeMode(): boolean;
|
||||
}
|
||||
export {};
|
||||
@@ -0,0 +1,343 @@
|
||||
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;
|
||||
};
|
||||
import dayjs from 'dayjs';
|
||||
import config from '../common/config';
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import defaultLocale from './locale/zh';
|
||||
import props from './props';
|
||||
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();
|
||||
},
|
||||
mode(m) {
|
||||
const fullModes = this.getFullModeArray(m);
|
||||
this.setData({
|
||||
fullModes,
|
||||
});
|
||||
this.updateColumns();
|
||||
},
|
||||
};
|
||||
this.date = null;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
columns: [],
|
||||
columnsValue: [],
|
||||
fullModes: [],
|
||||
locale: defaultLocale,
|
||||
};
|
||||
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 } = this.data;
|
||||
const columnOptions = [];
|
||||
fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
|
||||
const columnOption = this.getOptionByType(mode);
|
||||
columnOptions.push(columnOption);
|
||||
});
|
||||
return columnOptions;
|
||||
},
|
||||
getOptionByType(type) {
|
||||
const { locale } = this.data;
|
||||
const options = [];
|
||||
const minEdge = this.getOptionEdge('min', type);
|
||||
const maxEdge = this.getOptionEdge('max', type);
|
||||
for (let i = minEdge; i <= maxEdge; i += 1) {
|
||||
const label = type === 'month' ? i + 1 : i;
|
||||
options.push({
|
||||
value: `${i}`,
|
||||
label: `${label + 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 { locale } = this.data;
|
||||
const months = [];
|
||||
const minMonth = this.getOptionEdge('min', 'month');
|
||||
const maxMonth = this.getOptionEdge('max', 'month');
|
||||
for (let i = minMonth; i <= maxMonth; i += 1) {
|
||||
months.push({
|
||||
value: `${i}`,
|
||||
label: `${i + 1 + locale.month}`,
|
||||
});
|
||||
}
|
||||
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.resetColumns();
|
||||
},
|
||||
onCancel() {
|
||||
this.resetColumns();
|
||||
this.triggerEvent('cancel');
|
||||
},
|
||||
onVisibleChange(e) {
|
||||
if (!e.detail.visible) {
|
||||
this.resetColumns();
|
||||
}
|
||||
},
|
||||
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;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-picker": "../picker/picker",
|
||||
"t-picker-item": "../picker/picker-item"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<t-picker
|
||||
custom-style="{{ customStyle }}"
|
||||
class="{{classPrefix}}"
|
||||
visible="{{visible}}"
|
||||
value="{{columnsValue}}"
|
||||
bind:pick="onColumnChange"
|
||||
bind:change="onConfirm"
|
||||
bind:cancel="onCancel"
|
||||
bind:visible-change="onVisibleChange"
|
||||
header="{{header}}"
|
||||
title="{{title}}"
|
||||
confirmBtn="{{confirmBtn || locale.confirm}}"
|
||||
cancelBtn="{{cancelBtn || locale.cancel}}"
|
||||
>
|
||||
<slot slot="header" name="header" />
|
||||
|
||||
<t-picker-item wx:for="{{columns}}" wx:key="index" class="{{classPrefix}}__item" options="{{item}}" index="index" />
|
||||
<slot slot="footer" name="footer" />
|
||||
</t-picker>
|
||||
13
miniprogram_npm/tdesign-miniprogram/date-time-picker/locale/en.d.ts
vendored
Normal file
13
miniprogram_npm/tdesign-miniprogram/date-time-picker/locale/en.d.ts
vendored
Normal 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;
|
||||
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
year: '',
|
||||
month: '',
|
||||
date: '',
|
||||
hour: '',
|
||||
minute: '',
|
||||
second: '',
|
||||
am: 'AM',
|
||||
pm: 'PM',
|
||||
confirm: 'confirm',
|
||||
cancel: 'cancel',
|
||||
};
|
||||
13
miniprogram_npm/tdesign-miniprogram/date-time-picker/locale/zh.d.ts
vendored
Normal file
13
miniprogram_npm/tdesign-miniprogram/date-time-picker/locale/zh.d.ts
vendored
Normal 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;
|
||||
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
year: '年',
|
||||
month: '月',
|
||||
date: '日',
|
||||
hour: '时',
|
||||
minute: '分',
|
||||
second: '秒',
|
||||
am: '上午',
|
||||
pm: '下午',
|
||||
confirm: '确定',
|
||||
cancel: '取消',
|
||||
};
|
||||
3
miniprogram_npm/tdesign-miniprogram/date-time-picker/props.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/date-time-picker/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdDateTimePickerProps } from './type';
|
||||
declare const props: TdDateTimePickerProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,59 @@
|
||||
const props = {
|
||||
cancelBtn: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
confirmBtn: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
end: {
|
||||
type: null,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
footer: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
header: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
mode: {
|
||||
type: null,
|
||||
value: 'date',
|
||||
},
|
||||
showWeek: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
start: {
|
||||
type: null,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: null,
|
||||
value: null,
|
||||
},
|
||||
defaultValue: {
|
||||
type: null,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
65
miniprogram_npm/tdesign-miniprogram/date-time-picker/type.d.ts
vendored
Normal file
65
miniprogram_npm/tdesign-miniprogram/date-time-picker/type.d.ts
vendored
Normal file
@@ -0,0 +1,65 @@
|
||||
export interface TdDateTimePickerProps {
|
||||
cancelBtn?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
end?: {
|
||||
type: StringConstructor;
|
||||
value?: string | number;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
|
||||
};
|
||||
footer?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
format?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
header?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
mode?: {
|
||||
type: StringConstructor;
|
||||
value?: DateTimePickerMode;
|
||||
};
|
||||
showWeek?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
start?: {
|
||||
type: StringConstructor;
|
||||
value?: string | number;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
value?: DateValue;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: StringConstructor;
|
||||
value?: DateValue;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export declare type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
|
||||
export declare type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
|
||||
export declare type DateValue = string | number;
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user