This commit is contained in:
Ling53666
2025-08-18 09:11:51 +08:00
commit 02554225da
2516 changed files with 133155 additions and 0 deletions

View File

@ -0,0 +1,80 @@
<template name="selector">
<view
class="ant-range-picker-selector-item {{active ? 'ant-range-picker-selector-item-active' : ''}}"
onTap="onChangeCurrentPickerType"
data-type="{{type}}"
>
<view
a:if="{{value}}"
class="ant-range-picker-selector-item-value"
>
{{value}}
</view>
<view
a:else
class="ant-range-picker-selector-item-placeholder"
>
{{placeholder}}
</view>
<icon
a:if="{{precision === 'year' || precision === 'month' || precision === 'day' || precision === 'hour'}}"
type="CalendarOutline"
className="ant-range-picker-selector-item-icon"
></icon>
</view>
</template>
<ant-picker
formattedValueText="{{formattedValueText}}"
className="ant-range-picker {{className || ''}}"
popClassName="{{!currentStartDate || !currentEndDate ? 'ant-range-picker-confirm-disabled' : ''}} {{popClassName || ''}}"
visible="{{visible}}"
style="{{style}}"
animationType="{{animationType}}"
options="{{columns}}"
value="{{currentValue}}"
disabled="{{disabled}}"
title="{{title}}"
placeholder="{{placeholder}}"
okText="{{okText}}"
cancelText="{{cancelText}}"
maskStyle="{{maskStyle}}"
maskClassName="{{maskClassName}}"
indicatorStyle="{{indicatorStyle}}"
indicatorClassName="{{indicatorClassName}}"
onChange="onChange"
onCancel="onCancel"
onOk="onOk"
onVisibleChange="onVisibleChange"
maskClosable="{{maskClosable}}"
>
<view
class="ant-range-picker-selector"
slot="content-header"
>
<template
is="selector"
data="{{ placeholder: startPlaceholder, active: pickerType === 'start', type: 'start', value: currentStartValueStr, precision: precision }}"
></template>
<view class="ant-range-picker-selector-split">{{splitCharacter}}</view>
<template
is="selector"
data="{{ placeholder: endPlaceholder, active: pickerType === 'end', type: 'end', value: currentEndValueStr, precision: precision }}"
></template>
</view>
<slot
name="content"
slot="content"
></slot>
<slot
name="title"
slot="title"
></slot>
<slot
name="prefix"
slot="prefix"
></slot>
<slot
name="suffix"
slot="suffix"
></slot>
</ant-picker>

View File

@ -0,0 +1 @@
export {};

View File

@ -0,0 +1,310 @@
import { Component, triggerEvent, triggerEventValues, triggerEventOnly, getValueFromProps, } from '../../_util/simply';
import { resolveEventValue, resolveEventValues } from '../../_util/platform';
import { DateRangePickerDefaultProps } from './props';
import dayjs from 'dayjs';
import equal from 'fast-deep-equal';
import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from '../util';
import computed from '../../mixins/computed';
import mixinValue from '../../mixins/value';
Component(DateRangePickerDefaultProps, {
// visible受控判断
isVisibleControlled: function () {
return 'visible' in getValueFromProps(this);
},
computed: function () {
var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate, pickerType = _a.pickerType;
var format = getValueFromProps(this, 'format');
if (pickerType)
return {
currentStartValueStr: currentStartDate
? dayjs(currentStartDate).format(format)
: '',
currentEndValueStr: currentEndDate
? dayjs(currentEndDate).format(format)
: '',
};
},
getMin: function (min) {
return min ? dayjs(min) : dayjs().subtract(10, 'year');
},
getMax: function (max) {
return max ? dayjs(max) : dayjs().add(10, 'year');
},
// didUpdate、弹窗打开、切换pickerType触发
setCurrentValue: function (currentProps) {
var _this = this;
var pickerVisible = this.pickerVisible; // 隐藏状态下从CValue触发展开状态使用当前数据
var precision = currentProps.precision;
var _a = this.data, pickerType = _a.pickerType, columns = _a.columns;
var realValue = this.getValue();
var _b = this.data, currentStartDate = _b.currentStartDate, currentEndDate = _b.currentEndDate;
var currentStartDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[0]) || null;
var currentEndDateByCValue = (realValue === null || realValue === void 0 ? void 0 : realValue[1]) || null;
// 展开状态说明在切换pickerType
if (pickerVisible) {
if (pickerType === 'start') {
if (!currentStartDate) {
currentStartDate = currentEndDate;
}
}
else {
// pickerType=end start已存在
// 结束时间默认选中开始
if (!currentEndDate) {
currentEndDate = currentStartDate;
}
}
}
else {
// 否则是在从cValue初始化
currentStartDate = currentStartDateByCValue;
currentEndDate = currentEndDateByCValue;
// 开始默认取优先取当前时间,不在时间范围内取开始时间
if (!currentStartDate) {
var min = this.getMin(currentProps.min).toDate();
var max = currentProps.max;
currentStartDate = new Date();
if ((min && dayjs(currentStartDate).isBefore(min, precision)) ||
(max && dayjs(currentStartDate).isAfter(max, precision)) ||
(currentEndDateByCValue &&
currentStartDate > currentEndDateByCValue)) {
currentStartDate = min;
}
}
}
var currentValue = getValueByDate(pickerType === 'start' ? currentStartDate : currentEndDate, precision);
var newColumns = this.generateData(currentValue, currentProps);
if (!equal(newColumns, columns)) {
this.setData({ columns: newColumns }, function () {
_this.setData({
currentStartDate: currentStartDate,
currentEndDate: currentEndDate,
currentValue: currentValue,
formattedValueText: _this.onFormat(),
});
});
}
else {
this.setData({
currentStartDate: currentStartDate,
currentEndDate: currentEndDate,
currentValue: currentValue,
formattedValueText: this.onFormat(),
});
}
},
/**
* 生成选项数据didmound、picker change、打开弹窗、切换picker type触发
*/
generateData: function (currentValue, currentProps) {
var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
var min = this.getMin(propsMin);
var max = this.getMax(propsMax);
if (max < min) {
return [];
}
var currentPickerDay = dayjs();
if (currentValue.length > 0) {
currentPickerDay = dayjs(getDateByValue(currentValue));
}
if (currentPickerDay < min || currentPickerDay > max) {
currentPickerDay = min;
}
var newColumns = getRangeData(precision, min, max, currentPickerDay, this.onFormatLabel.bind(this));
return newColumns;
},
onChange: function (selectedIdx) {
var _this = this;
var selectedIndex = resolveEventValues(getValidValue(selectedIdx))[0];
var _a = getValueFromProps(this, [
'format',
'precision',
'max',
'min',
]), format = _a[0], precision = _a[1], pmax = _a[2], pmin = _a[3];
var date = getDateByValue(selectedIndex);
var min = this.getMin(pmin);
var max = this.getMax(pmax);
if (dayjs(date).isBefore(min)) {
date = min.toDate();
selectedIndex = getValueByDate(date, precision);
}
if (dayjs(date).isAfter(max)) {
date = max.toDate();
selectedIndex = getValueByDate(date, precision);
}
var _b = this.data, pickerType = _b.pickerType, columns = _b.columns, currentEndDate = _b.currentEndDate, currentStartDate = _b.currentStartDate;
var newData = {
currentValue: selectedIndex,
formattedValueText: this.onFormat(),
};
if (pickerType === 'start') {
newData.currentStartDate = date;
if (currentEndDate && dayjs(date).isAfter(currentEndDate)) {
newData.currentEndDate = null;
}
}
else {
newData.currentEndDate = date;
if (currentStartDate && dayjs(date).isBefore(currentStartDate)) {
newData.currentStartDate = null;
}
}
var newColumns = this.generateData(selectedIndex, getValueFromProps(this));
if (!equal(newColumns, columns)) {
this.setData({
columns: newColumns,
}, function () {
_this.setData(newData);
triggerEventValues(_this, 'pickerChange', [
pickerType,
date,
dayjs(date).format(format),
]);
});
}
else {
this.setData(newData);
triggerEventValues(this, 'pickerChange', [
pickerType,
date,
dayjs(date).format(format),
]);
}
},
onCancel: function (e) {
triggerEventOnly(this, 'cancel', e);
},
onOk: function () {
var format = getValueFromProps(this, 'format');
var _a = this.data, currentStartDate = _a.currentStartDate, currentEndDate = _a.currentEndDate;
var realValue = [currentStartDate, currentEndDate];
if (!this.isControlled()) {
this.update(realValue);
}
triggerEventValues(this, 'ok', [
realValue,
realValue.map(function (v) { return dayjs(v).format(format); }),
]);
},
onFormatLabel: function (type, value) {
var onFormatLabel = getValueFromProps(this, 'onFormatLabel');
var formatValueByProps = onFormatLabel && onFormatLabel(type, value);
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return String(formatValueByProps);
}
return this.defaultFormatLabel(type, value);
},
defaultFormatLabel: function (type, value) {
var suffixMap = {
year: '年',
month: '月',
day: '日',
hour: '时',
minute: '分',
second: '秒',
};
return "".concat(value).concat(suffixMap[type]);
},
defaultFormat: function (date, valueStrs) {
var _a = getValueFromProps(this, [
'format',
'splitCharacter',
]), format = _a[0], splitCharacter = _a[1];
if (format && valueStrs && valueStrs[0] && valueStrs[1]) {
return valueStrs.join("".concat(splitCharacter));
}
return '';
},
onFormat: function () {
var _a = getValueFromProps(this, [
'onFormat',
'format',
]), onFormat = _a[0], format = _a[1];
var realValue = this.getValue();
var formatValueByProps = onFormat &&
onFormat(realValue, realValue
? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); })
: null);
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return formatValueByProps;
}
return this.defaultFormat(realValue, realValue
? realValue.map(function (v) { return (v ? dayjs(v).format(format) : null); })
: null);
},
/**
* 显示/隐藏切换
* @param visible
*/
onVisibleChange: function (visible) {
if (!this.isVisibleControlled() && visible) {
this.setData({ pickerType: 'start' });
this.setCurrentValue(getValueFromProps(this));
this.pickerVisible = visible;
}
triggerEvent(this, 'visibleChange', resolveEventValue(visible));
},
onChangeCurrentPickerType: function (e) {
var type = e.currentTarget.dataset.type;
var pickerType = this.data.pickerType;
if (type !== pickerType) {
this.setData({
pickerType: type,
});
this.setCurrentValue(getValueFromProps(this));
}
},
}, {
currentValue: [],
columns: [],
pickerType: 'start',
currentStartDate: null,
currentEndDate: null,
forceUpdate: 0,
formattedValueText: '',
}, [
mixinValue({
transformValue: function (value) {
return {
value: value && value[0] && value[1]
? [dayjs(value[0]).toDate(), dayjs(value[1]).toDate()]
: undefined,
needUpdate: true,
};
},
}),
computed(),
], {
pickerVisible: false,
didMount: function () {
this.pickerVisible = false;
var _a = getValueFromProps(this, [
'visible',
'defaultVisible',
]), visible = _a[0], defaultVisible = _a[1];
this.setData({
visible: this.isVisibleControlled() ? visible : defaultVisible,
formattedValueText: this.onFormat(),
});
},
didUpdate: function (prevProps, prevData) {
var currentProps = getValueFromProps(this);
var visible = getValueFromProps(this, 'visible');
if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
this.setData({ visible: visible });
this.setCurrentValue(currentProps);
this.pickerVisible = visible;
}
if (!this.isEqualValue(prevData)) {
this.setData({
forceUpdate: this.data.forceUpdate + 1,
formattedValueText: this.onFormat(),
});
if (this.pickerVisible) {
// 展开状态才更新picker的数据否则下次triggerVisible触发
this.setCurrentValue(currentProps);
}
}
},
});

View File

@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"icon": "../../Icon/index",
"ant-picker": "../../Picker/index"
}
}

View File

@ -0,0 +1,53 @@
@import (reference) '../../style/themes/index.less';
@import '../../style/mixins/hairline.less';
@pickerPrefix: ant-range-picker;
.@{pickerPrefix} {
&-confirm-disabled {
.ant-picker-header-confirm {
pointer-events: none;
opacity: 0.6;
}
}
&-selector {
display: flex;
align-items: center;
justify-content: space-between;
height: 104 * @rpx;
padding: 24 * @rpx 24 * @rpx 0;
box-sizing: border-box;
&-item {
width: 310 * @rpx;
height: 64 * @rpx;
padding: 0 16 * @rpx 0 24 * @rpx;
box-sizing: border-box;
border-radius: 8 * @rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 1 * @rpx 6 * @rpx 0 fade(@COLOR_BLACK_CHANGE, 10);
color: @COLOR_TEXT_PRIMARY;
&-active {
.hairline-radius( @COLOR_BRAND1,16*@rpx);
color: @COLOR_BRAND1;
.@{pickerPrefix}-selector-item-icon {
color: @COLOR_BRAND1;
}
}
&-value {
font-size: 28 * @rpx;
}
&-placeholder {
font-size: 28 * @rpx;
color: @COLOR_TEXT_WEAK;
}
&-icon {
color: @COLOR_TEXT_WEAK;
font-size: 32 * @rpx;
}
}
&-split {
color: @COLOR_TEXT_WEAK;
}
}
}

View File

@ -0,0 +1,139 @@
import { IBaseProps } from '../../_util/base';
export type PickerValue = [Date, Date];
/**
* @description 对话框
*/
export interface IDateRangePickerProps extends IBaseProps {
visible?: boolean;
defaultVisible?: boolean;
/**
* @desciption 动画类型
* @default "transform"
*/
animationType: 'transform' | 'position';
/**
* @description 时间格式化显示例如YYYY-MM-DD
*/
format: string;
/**
* @description 最小值
* @default 十年前
*/
min: Date;
/**
* @description 最大值
* @default 十年后
*/
max: Date;
/**
* @description 当前数据
*/
value: PickerValue;
/**
* @description 默认值
*/
defaultValue: PickerValue;
/**
* @description 标题
*/
title: string;
/**
* @description 确定按钮文案
* @default "确定"
*/
okText: string;
/**
* @description 取消文案
* @default "取消"
*/
cancelText: string;
/**
* @description 提示文案
* @default '请选择'
*/
placeholder: string;
/**
* @description 是否禁用
*/
disabled?: boolean;
/**
*@description 选中框样式
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorStyle?: string;
/**
*@description 选中框类名
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorClassName?: string;
/**
* @description 蒙层的样式。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskStyle?: string;
/**
* @description 蒙层的类名。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskClassName?: string;
/**
* @description 点击确认回调
*/
onOk?: (date: PickerValue, dateStr: [string, string], e: Record<string, any>) => void;
/**
* @description 点击取消回调
*/
onCancel?: (e: Record<string, any>) => void;
/**
* @description 发生滚动即触发, 与 onChange 点击 ok 后触发不同
*/
onPickerChange?: (type: 'start' | 'end', date: Date, dateStr: string, e: Record<string, any>) => void;
/**
* @description 精度
* @default 'day'
*/
precision: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
/**
* @description 选中值的文本显示格式
*/
onFormat?: (date: PickerValue, dateStr: [string, string]) => string;
/**
* @description 切换显示隐藏
*/
onVisibleChange?: (visible: any, e: Record<string, any>) => void;
/**
* @description 显示连接符
* @default '-''
*/
splitCharacter: string;
/**
* @description 开始时间提示文案
* @default '未选择'
*/
startPlaceholder: string;
/**
* @description 结束时间提示文案
* @default '未选择'
*/
endPlaceholder: string;
/**
* @description 点击蒙层是否可以关闭
* @default false
*/
maskClosable: boolean;
/**
* @description 弹出框类名
*/
popClassName: string;
/**
* @description 弹出框样式
*/
popStyle: string;
/**
* 自定义每列展示的内容
* @param type
* @param value
*/
onFormatLabel?(type: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second', value: number): string;
}
export declare const DateRangePickerDefaultProps: Partial<IDateRangePickerProps>;

View File

@ -0,0 +1,24 @@
export var DateRangePickerDefaultProps = {
visible: null,
defaultVisible: null,
animationType: 'transform',
format: 'YYYY/MM/DD',
min: null,
max: null,
value: null,
defaultValue: null,
title: '',
okText: '确定',
cancelText: '取消',
placeholder: '请选择',
precision: 'day',
splitCharacter: '-',
startPlaceholder: '未选择',
endPlaceholder: '未选择',
maskClosable: true,
popClassName: '',
popStyle: '',
disabled: false,
onFormatLabel: null,
onFormat: null,
};

View File

@ -0,0 +1,42 @@
<ant-picker
className="ant-date-picker"
popClassName="ant-date-picker-popup {{popClassName || ''}}"
visible="{{visible}}"
style="{{style}}"
popStyle="{{popStyle}}"
animationType="{{animationType}}"
options="{{columns}}"
value="{{currentValue}}"
disabled="{{disabled}}"
title="{{title}}"
placeholder="{{placeholder}}"
okText="{{okText}}"
cancelText="{{cancelText}}"
maskStyle="{{maskStyle}}"
maskClassName="{{maskClassName}}"
indicatorStyle="{{indicatorStyle}}"
indicatorClassName="{{indicatorClassName}}"
onChange="onChange"
onCancel="onCancel"
onOk="onOk"
formattedValueText="{{formattedValueText}}"
onVisibleChange="onVisibleChange"
maskClosable="{{maskClosable}}"
>
<slot
name="content"
slot="content"
></slot>
<slot
name="title"
slot="title"
></slot>
<slot
name="prefix"
slot="prefix"
></slot>
<slot
name="suffix"
slot="suffix"
></slot>
</ant-picker>

View File

@ -0,0 +1 @@
export {};

View File

@ -0,0 +1,222 @@
import { Component, triggerEvent, triggerEventOnly, triggerEventValues, getValueFromProps, } from '../_util/simply';
import { resolveEventValue, resolveEventValues } from '../_util/platform';
import { DatePickerDefaultProps } from './props';
import dayjs from 'dayjs';
import equal from 'fast-deep-equal';
import { getRangeData, getDateByValue, getValueByDate, getValidValue, } from './util';
import mixinValue from '../mixins/value';
Component(DatePickerDefaultProps, {
// visible受控判断
isVisibleControlled: function () {
return 'visible' in getValueFromProps(this);
},
// 当前选中的picker值处理无cValue时的情况优先取当前时间不在时间范围内取开始时间
getCurrentValueWithCValue: function (currentProps) {
var realValue = this.getValue();
var min = currentProps.min, max = currentProps.max, precision = currentProps.precision;
if (realValue) {
return getValueByDate(realValue, precision);
}
else {
var now = new Date();
if (!(min && dayjs(now).isBefore(dayjs(min), precision)) &&
!(max && dayjs(now).isAfter(dayjs(max), precision))) {
return getValueByDate(now, precision);
}
else {
return getValueByDate(this.getMin(min).toDate(), precision);
}
}
},
getMin: function (min) {
return min ? dayjs(min) : dayjs().subtract(10, 'year');
},
getMax: function (max) {
return max ? dayjs(max) : dayjs().add(10, 'year');
},
/**
* didUpdate、弹窗打开触发
*/
setCurrentValue: function (currentProps) {
var _this = this;
var currentValue = this.getCurrentValueWithCValue(currentProps);
var newColumns = this.generateData(currentValue, currentProps);
if (!equal(newColumns, this.data.columns)) {
this.setData({
columns: newColumns,
}, function () {
_this.setData({
currentValue: currentValue,
formattedValueText: _this.onFormat(),
});
});
}
},
// 生成选项数据didmound、picker change、打开弹窗触发
generateData: function (currentValue, currentProps) {
var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
var min = this.getMin(propsMin);
var max = this.getMax(propsMax);
if (max < min) {
return [];
}
var currentPickerDay = dayjs();
if (currentValue.length > 0) {
currentPickerDay = dayjs(getDateByValue(currentValue));
}
if (currentPickerDay < min || currentPickerDay > max) {
currentPickerDay = min;
}
var newColumns = getRangeData(precision, min, max, currentPickerDay, this.onFormatLabel.bind(this));
return newColumns;
},
onFormatLabel: function (type, value) {
var onFormatLabel = getValueFromProps(this, 'onFormatLabel');
var formatValueByProps = onFormatLabel && onFormatLabel(type, value);
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return String(formatValueByProps);
}
return this.defaultFormatLabel(type, value);
},
defaultFormatLabel: function (type, value) {
var suffixMap = {
year: '年',
month: '月',
day: '日',
hour: '时',
minute: '分',
second: '秒',
};
return "".concat(value).concat(suffixMap[type]);
},
onChange: function (selectedIdx) {
var _this = this;
var _a = getValueFromProps(this, [
'min',
'max',
'format',
'precision',
]), pmin = _a[0], pmax = _a[1], format = _a[2], precision = _a[3];
var selectedIndex = resolveEventValues(getValidValue(selectedIdx))[0];
var date = getDateByValue(selectedIndex);
var min = this.getMin(pmin);
var max = this.getMax(pmax);
if (dayjs(date).isBefore(min)) {
date = min.toDate();
selectedIndex = getValueByDate(date, precision);
}
if (dayjs(date).isAfter(max)) {
date = max.toDate();
selectedIndex = getValueByDate(date, precision);
}
var newColumns = this.generateData(selectedIndex, getValueFromProps(this));
if (!equal(newColumns, this.data.columns)) {
this.setData({
columns: newColumns,
}, function () {
_this.setData({ currentValue: selectedIndex });
var date = getDateByValue(selectedIndex);
triggerEventValues(_this, 'pickerChange', [
date,
dayjs(date).format(format),
]);
});
}
else {
this.setData({ currentValue: selectedIndex });
var date_1 = getDateByValue(selectedIndex);
triggerEventValues(this, 'pickerChange', [
date_1,
dayjs(date_1).format(format),
]);
}
},
onCancel: function (e) {
triggerEventOnly(this, 'cancel', e);
},
onOk: function () {
var currentValue = this.data.currentValue;
var format = getValueFromProps(this, 'format');
var date = getDateByValue(currentValue);
if (!this.isControlled()) {
this.update(date);
}
triggerEventValues(this, 'ok', [date, dayjs(date).format(format)]);
},
defaultFormat: function (value, valueStr) {
var format = getValueFromProps(this, 'format');
if (format && valueStr) {
return valueStr;
}
return '';
},
onFormat: function () {
var _a = getValueFromProps(this, [
'format',
'onFormat',
]), format = _a[0], onFormat = _a[1];
var realValue = this.getValue();
var formatValueByProps = onFormat &&
onFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return formatValueByProps;
}
return this.defaultFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
},
onVisibleChange: function (visible) {
this.pickerVisible = visible;
if (!this.isVisibleControlled() && visible) {
this.setCurrentValue(getValueFromProps(this));
}
triggerEvent(this, 'visibleChange', resolveEventValue(visible));
},
}, {
currentValue: [],
formattedValueText: '',
columns: [],
forceUpdate: 0,
visible: null,
}, [
mixinValue({
transformValue: function (value) {
return {
value: value ? dayjs(value).toDate() : undefined,
needUpdate: true,
};
},
}),
], {
pickerVisible: false,
onInit: function () {
this.pickerVisible = false;
var _a = getValueFromProps(this, [
'visible',
'defaultVisible',
]), visible = _a[0], defaultVisible = _a[1];
this.setData({
visible: this.isVisibleControlled() ? visible : defaultVisible,
formattedValueText: this.onFormat(),
});
},
didUpdate: function (prevProps, prevData) {
var currentProps = getValueFromProps(this);
var visible = getValueFromProps(this, 'visible');
if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
this.pickerVisible = visible;
this.setData({ visible: visible });
if (this.pickerVisible) {
this.setCurrentValue(currentProps);
}
}
if (!this.isEqualValue(prevData)) {
this.setData({
forceUpdate: this.data.forceUpdate + 1,
formattedValueText: this.onFormat(),
});
// 展开状态才更新picker的数据否则下次triggerVisible触发
if (this.pickerVisible) {
this.setCurrentValue(currentProps);
}
}
},
});

View File

@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"ant-picker": "../Picker/index"
}
}

View File

@ -0,0 +1,124 @@
import { IBaseProps } from '../_util/base';
export type PickerValue = Date | string | number;
/**
* @description 对话框
*/
export interface IDatePickerProps extends IBaseProps {
visible?: boolean;
defaultVisible?: boolean;
/**
* @desciption 动画类型
* @default "transform"
*/
animationType?: 'transform' | 'position';
/**
* @description 时间格式化显示例如YYYY-MM-DD
*/
format?: string;
/**
* @description 最小值
* @default 十年前
*/
min?: PickerValue;
/**
* @description 最大值
* @default 十年后
*/
max?: PickerValue;
/**
* @description 当前数据
*/
value?: PickerValue;
/**
* @description 默认值
*/
defaultValue?: PickerValue;
/**
* @description 标题
*/
title?: string;
/**
* @description 确定按钮文案
* @default "确定"
*/
okText?: string;
/**
* @description 取消文案
* @default "取消"
*/
cancelText?: string;
/**
* @description 提示文案
* @default '请选择'
*/
placeholder?: string;
/**
* @description 精度
* @default 'day'
*/
precision: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
/**
* @description 点击蒙层是否可以关闭
* @default false
*/
maskClosable?: boolean;
/**
* @description 弹出框类名
*/
popClassName?: string;
/**
* @description 弹出框样式
*/
popStyle?: string;
/**
* @description 是否禁用
*/
disabled?: boolean;
/**
*@description 选中框样式
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorStyle?: string;
/**
*@description 选中框类名
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorClassName?: string;
/**
* @description 蒙层的样式。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskStyle?: string;
/**
* @description 蒙层的类名。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskClassName?: string;
/**
* @description 点击确认回调
*/
onOk?: (date: PickerValue, dateStr: string, e: Record<string, any>) => void;
/**
* @description 点击取消回调
*/
onCancel?: (e: Record<string, any>) => void;
/**
* @description 发生滚动即触发, 与 onChange 点击 ok 后触发不同
*/
onPickerChange?: (date: PickerValue, dateStr: string, e: Record<string, any>) => void;
/**
* @description 选中值的文本显示格式
*/
onFormat?: (date: PickerValue, dateStr: string) => string;
/**
* @description 切换显示隐藏
*/
onVisibleChange?: (visible: any, e: Record<string, any>) => void;
/**
* 自定义每列展示的内容
* @param type
* @param value
*/
onFormatLabel?(type: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second', value: number): string;
}
export declare const DatePickerDefaultProps: IDatePickerProps;

View File

@ -0,0 +1,21 @@
export var DatePickerDefaultProps = {
visible: null,
defaultVisible: null,
animationType: 'transform',
format: 'YYYY/MM/DD',
min: null,
max: null,
value: null,
defaultValue: null,
title: '',
okText: '确定',
cancelText: '取消',
placeholder: '请选择',
precision: 'day',
maskClosable: true,
popClassName: '',
popStyle: '',
disabled: false,
onFormatLabel: null,
onFormat: null,
};

View File

@ -0,0 +1,34 @@
import { Dayjs } from 'dayjs';
declare const precisionLengthRecord: {
year: number;
month: number;
day: number;
hour: number;
minute: number;
second: number;
};
export declare function getRangeData(precision: keyof typeof precisionLengthRecord, min: Dayjs, max: Dayjs, currentPickerDay: Dayjs, format: (precision: keyof typeof precisionLengthRecord, value: number) => string): any[];
/**
* 选中的值转换为时间类型主要处理month从0开始的情况
* @param value
* @returns
*/
export declare function getDateByValue(value: any): Date;
/**
* date转换为value数组
* @param value
* @returns
*/
export declare function getValueByDate(date: any, precision: keyof typeof precisionLengthRecord): any[];
/**
* 是否有效日期,主要处理月份对应可选日期,避免当前时间日期超出当月最后一天
* @param value
*/
export declare function getValidValue(value: any): any;
/**
* 比较两个date是否是同一时间
* @param date1
* @param date2
*/
export declare function isEqualDate(date1: any, date2: any): boolean;
export {};

View File

@ -0,0 +1,169 @@
import { __spreadArray } from "tslib";
import dayjs from 'dayjs';
function getArray(start, end, format) {
var res = [];
for (var i = 0; i < end - start + 1; i++) {
res.push({ label: format(start + i), value: start + i });
}
return res;
}
var precisionLengthRecord = {
year: 1,
month: 2,
day: 3,
hour: 4,
minute: 5,
second: 6,
};
function getYears(min, max, format) {
return getArray(min.year(), max.year(), format.bind(this, 'year'));
}
function getMonths(min, max, currentPicker, format) {
var start = 1;
var end = 12;
if (currentPicker
.clone()
.set('month', start - 1)
.isBefore(min)) {
start = min.month() + 1;
}
if (currentPicker
.clone()
.set('month', end - 1)
.isAfter(max)) {
end = max.month() + 1;
}
return getArray(start, end, format.bind(this, 'month'));
}
function getDates(min, max, currentPicker, format) {
var start = 1;
var end = currentPicker.daysInMonth();
if (currentPicker.clone().set('date', start).isBefore(min)) {
start = min.date();
}
if (currentPicker.clone().set('date', end).isAfter(max)) {
end = max.date();
}
return getArray(start, end, format.bind(this, 'day'));
}
function getHours(min, max, currentPicker, format) {
var start = 0;
var end = 23;
if (currentPicker.clone().set('hour', start).isBefore(min)) {
start = min.hour();
}
if (currentPicker.clone().set('hour', end).isAfter(max)) {
end = max.hour();
}
return getArray(start, end, format.bind(this, 'hour'));
}
function getMinutes(min, max, currentPicker, format) {
var start = 0;
var end = 59;
if (currentPicker.clone().set('minute', start).isBefore(min)) {
start = min.minute();
}
if (currentPicker.clone().set('minute', end).isAfter(max)) {
end = max.minute();
}
return getArray(start, end, format.bind(this, 'minute'));
}
function getSeconds(min, max, currentPicker, format) {
var start = 0;
var end = 59;
if (currentPicker.clone().set('second', start).isBefore(min)) {
start = min.second();
}
if (currentPicker.clone().set('second', end).isAfter(max)) {
end = max.second();
}
return getArray(start, end, format.bind(this, 'second'));
}
export function getRangeData(precision, min, max, currentPickerDay, format) {
var data = [];
var len = precisionLengthRecord[precision];
if (!len)
return [];
for (var i = 0; i < len; i++) {
switch (i) {
case 0:
data.push(getYears(min, max, format));
break;
case 1:
data.push(getMonths(min, max, currentPickerDay, format));
break;
case 2:
data.push(getDates(min, max, currentPickerDay, format));
break;
case 3:
data.push(getHours(min, max, currentPickerDay, format));
break;
case 4:
data.push(getMinutes(min, max, currentPickerDay, format));
break;
case 5:
data.push(getSeconds(min, max, currentPickerDay, format));
break;
}
}
return data;
}
/**
* 选中的值转换为时间类型主要处理month从0开始的情况
* @param value
* @returns
*/
export function getDateByValue(value) {
//@ts-ignore
return new (Date.bind.apply(Date, __spreadArray([void 0], value.map(function (v, i) { return String(i === 1 ? v - 1 : v); }), false)))();
}
/**
* date转换为value数组
* @param value
* @returns
*/
export function getValueByDate(date, precision) {
var fields = [
'getFullYear',
'getMonth',
'getDate',
'getHours',
'getMinutes',
'getSeconds',
];
var value = [];
if (!date)
return value;
for (var i = 0; i < precisionLengthRecord[precision]; i++) {
value.push(date[fields[i]]());
if (i === 1) {
value[1] = value[1] + 1;
}
}
return value;
}
/**
* 是否有效日期,主要处理月份对应可选日期,避免当前时间日期超出当月最后一天
* @param value
*/
export function getValidValue(value) {
if (value.length > 2) {
var maxDate = new Date(value[0], value[1], 0).getDate();
if (value[2] > maxDate) {
value = value.slice();
value[2] = maxDate;
}
}
return value;
}
/**
* 比较两个date是否是同一时间
* @param date1
* @param date2
*/
export function isEqualDate(date1, date2) {
if (date1 instanceof Date && date2 instanceof Date) {
return dayjs(date1).isSame(date2);
}
return date1 === date2;
}