-
Notifications
You must be signed in to change notification settings - Fork 0
/
calendar.tsx
90 lines (88 loc) · 2.47 KB
/
calendar.tsx
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
import React, { useState, useRef } from 'react'
import moment from 'moment'
import {
Screen,
Button,
Popup,
S,
Calendar,
} from '../../packages/components/src'
function CalendarDemo() {
const [dateRange, setDateRange] = useState('')
const dateRangeRef = useRef('')
const [singleDate, setSingleDate] = useState('')
const singleDateRef = useRef('')
return (
<Screen>
<Button
style={S.marginTop8}
type={'default'}
onPress={() => {
Popup.render({
position: 'bottom',
title: '选择日期',
children: (
<Calendar
onChange={(_, [start, end]) => {
dateRangeRef.current = `${start.format('MM-DD')}~${end.format(
'MM-DD',
)}`
console.log(dateRangeRef.current)
}}
min={moment().add(-90, 'day')}
max={moment().add(90, 'day')}
value={[moment().add(15, 'day'), moment().add(30, 'day')]}
type="range"
/>
),
style: {
height: '50%',
},
onOk() {
setDateRange(dateRangeRef.current)
Popup.hide()
},
}).catch(() => {
console.log('关闭啦')
})
}}>
选择日期范围为:{dateRange}
</Button>
<Button
style={S.marginTop8}
type={'default'}
onPress={() => {
Popup.render({
position: 'bottom',
title: '选择日期',
children: (
<Calendar
onChange={(_, selected) => {
singleDateRef.current = `${selected.format('MM-DD')}`
}}
min={moment().add(-90, 'day')}
max={moment().add(90, 'day')}
value={[moment().add(15, 'day'), moment().add(30, 'day')]}
disabledDate={(date) => {
return moment(date) > moment().add(10, 'day')
}}
type="single"
/>
),
style: {
height: '70%',
},
onOk() {
setSingleDate(singleDateRef.current)
Popup.hide()
},
}).catch(() => {
console.log('关闭啦')
})
}}>
单选日期为:{singleDate}
</Button>
</Screen>
)
}
export default CalendarDemo