index.tsx
6.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
import React, { useState, useEffect, useRef } from 'react';
import { DatePicker as Picker } from 'antd';
import moment from 'moment';
import type { Moment } from 'moment';
import './style.less';
interface searchParams<T>{
trid?:number | undefined;
date?:Array<T>
}
const DatePicker:any = Picker;
const {RangePicker} = DatePicker;
type RangeValue = [Moment | undefined, Moment | undefined];
function PlayBackPicker(props:any) {
const {handelDate} = props;
const startTime = moment(new Date()).subtract(1, "days").startOf('days').valueOf();
const endTime = moment(new Date()).startOf('days').valueOf();
const date = useRef<Array<number | null>>([startTime, endTime]);
const [dateFlag, setDateFlag] = useState<RangeValue>([moment(new Date()).subtract(1, "days").startOf('days'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss').startOf('days')]);
const [flag, setFlag] = useState<boolean>(true);
useEffect(() => {
handelDate(date.current);
}, []);
/**
* @description: 年月日时间选择
* @param {*}
* @return {*}
*/
const disabledDate = (current: Moment) => {
if (flag) {
//禁用当天之后的时间
return current > moment().endOf('day');
}
//限制选择开始时间后的取值范围
const startHour = dateFlag[0] && dateFlag[0].hour();
const startMinute = dateFlag[0] && dateFlag[0].minute();
const startSecond = dateFlag[0] && dateFlag[0].second();
const beforeDate = dateFlag[0] && (current > moment().endOf('day') || moment(current).set({'hour': startHour, 'minute': startMinute, "second": startSecond}).diff(dateFlag[0], 'days') > 1);
//限制选择结束时间后的取值范围
const afterHour = dateFlag[1] && dateFlag[1].hour();
const afterMinute = dateFlag[1] && dateFlag[1].minute();
const afterSecond = dateFlag[1] && dateFlag[1].second();
const afterDate = dateFlag[1] && dateFlag[1].diff(moment(current).set({'hour': afterHour, 'minute': afterMinute, "second": afterSecond}), 'days')>1;
return !!beforeDate || !!afterDate;
};
/**
* @description: 日期时分秒时间范围
* @param {any} date
* @param {any} type
* @return {*}
*/
const disabledTracksTime = (date:any, type:any) => {
if (!date) return;
const {_d: checkDate, _i: nowDate} = date;
const checkYear = moment(checkDate).format('YYYY-MM-DD');
const nowYear = moment(nowDate).format('YYYY-MM-DD');
console.log('type', type);
// if (type === 'start') {
// const hour = moment(date).hour();
// const minute = moment(date).minute();
// const second = moment(date).second();
// return {
// disabledHours: () => {
// const disabledArr = timeArr(24).splice(hour + 1, timeArr(24).length - hour - 1);
// console.log('disabledArr1', disabledArr);
// return disabledArr;
// },
// disabledMinutes: () => {
// const disabledArr = timeArr(60).splice(minute, timeArr(60).length - minute);
// console.log('disabledArr2', disabledArr);
// return disabledArr;
// },
// disabledSeconds: () => {
// const disabledArr = timeArr(60).splice(second, timeArr(60).length - second);
// console.log('disabledArr3', disabledArr);
// return disabledArr;
// },
// };
// }
if (checkYear === nowYear) {
const nowHour = moment(nowDate).hour();
const nowMinute = moment(nowDate).minute();
const nowSecond = moment(nowDate).second();
return {
disabledHours: () => {
const disabledArr = timeArr(24).splice(nowHour, timeArr(24).length - nowHour);
return disabledArr;
},
disabledMinutes: () => {
const disabledArr = timeArr(60).splice(nowMinute, timeArr(60).length - nowMinute);
return disabledArr;
},
disabledSeconds: () => {
const disabledArr = timeArr(60).splice(nowSecond, timeArr(60).length - nowSecond);
return disabledArr;
},
};
}
};
/**
* @description: 时分秒时间数组
* @param {number} length
* @return {*}
*/
const timeArr = (length:number):Array<number> => {
const arr = Array.from(Array(length), (value, index) => index);
return arr;
};
const onOpenChange = (type:boolean) => {
if (type) {
setDateFlag([undefined, undefined]);
if (date.current[0]!==null && date.current[1]!==null) {
date.current =[null, null];
handelDate([null, null]);
}
} else {
setFlag(true);
}
};
return (
<div>
<RangePicker
format="YYYY-MM-DD HH:mm:ss"
allowClear={false}
value={dateFlag}
showTime={{
hideDisabledOptions: true,
}}
disabledDate={disabledDate}
disabledTime={disabledTracksTime}
onCalendarChange={
(value:any) => {
setDateFlag(value);
setFlag(false);
}
}
onOpenChange={onOpenChange}
onChange={(dateVal:Object, dateString:Array<string>) => {
const dateTimestamp = dateString.map(item => {
return moment(item).valueOf();
});
date.current = dateTimestamp;
handelDate(dateTimestamp);
}}
onOk={
(val:any) => {
console.log('val', val);
}
}
/>
</div>
);
}
export default PlayBackPicker;