/
DatePickerHeader.tsx
60 lines (54 loc) · 1.88 KB
/
DatePickerHeader.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
import React from 'react'
import Button from '../Button'
import Next from '../icons/next'
import Previous from '../icons/previous'
import Monthpicker from '../MonthPicker'
import { DatePickerHeaderProps } from './props'
export default function DatePickerHeader(props: DatePickerHeaderProps) {
let {
selectedMonth,
selectedYear,
startDate,
endDate,
monthMenuRef,
yearMenuRef,
onChange,
onMenuClose,
onMenuOpen,
id
} = props
let startYear = startDate.getFullYear()
let endYear = endDate.getFullYear()
let startMonth = startDate.getMonth()
let endMonth = endDate.getMonth()
let selectedDate = new Date(selectedYear, selectedMonth)
let disablePrevious = selectedYear === startYear && selectedMonth === startMonth
let disableNext = selectedYear === endYear && selectedMonth === endMonth
let handleChange = (_: any, change: any) => {
onChange({ changeType: 'date', ...change })
}
return (
<div className='ui-kit-datepicker_calendar-header'>
<Button tabIndex={-1} size='tiny' variant='plain' className='px-4' disabled={disablePrevious} onClick={() => onChange({ changeType: 'month', offset: -1 })}><Previous /></Button>
<Monthpicker
min={startDate}
max={endDate}
value={selectedDate}
onChange={handleChange}
monthMenuRef={monthMenuRef}
yearMenuRef={yearMenuRef}
onOpen={(type: string) => onMenuOpen(type)}
onClose={(type: string) => onMenuClose(type)}
yearWidth={80}
width={100}
container='body'
className='element-flex-justify-around mb-0'
inputSize='small'
tabIndex={-1}
id={id}
inputClass='sub-select-input'
/>
<Button tabIndex={-1} size='tiny' variant='plain' className='px-4' disabled={disableNext} onClick={() => onChange({ changeType: 'month', offset: 1 })}><Next /></Button>
</div>
)
}