DateHome.js 4.12 KB
Newer Older
tdgiang committed
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
import React, { useState, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Popover from '@material-ui/core/Popover'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import { DateRangePicker } from 'react-date-range'
import { convertDate } from 'app/config/Function'
import 'react-date-range/dist/styles.css' // main css file
import 'react-date-range/dist/theme/default.css' // theme css file
const useStyles = makeStyles((theme) => ({
    typography: {
        padding: theme.spacing(2),
    },
}))

export default function SimplePopover(props) {
    const classes = useStyles()
    const [anchorEl, setAnchorEl] = React.useState(null)

    // useEffect(() => {
    //     getInitDate()
    // }, [])

    // const getInitDate = () => {
    //     let dateOffset = 24 * 60 * 60 * 1000 * 5 //5 days
    //     let myDate = new Date()
    //     myDate.setTime(myDate.getTime() - dateOffset)
    //     if (myDate)
    //         setSelectionRange({
    //             startDate: myDate,
    //             endDate: new Date(),
    //         })
    // }

    const [selectionRange, setSelectionRange] = useState({
        startDate: new Date(),
        endDate: new Date(),
    })

    const handleSelect = (date) => {
        setSelectionRange(date.range1)
    }

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget)
    }

    const handleClose = () => {
        setAnchorEl(null)
    }

    const onPress = () => {
        props.changeDateRange(selectionRange.startDate, selectionRange.endDate)
        setAnchorEl(null)
    }
    const onCancel = () => {
        props.changeDateRange(null, null)
        setAnchorEl(null)
    }
    const open = Boolean(anchorEl)
    const id = open ? 'simple-popover' : undefined

    return (
        <div>
            <Button
                style={{
                    padding: 10,
                    height: 40,
                    width: '100%',
                }}
                variant={'outlined'}
                onClick={handleClick}
            >
                {props.date ? (
                    <p>
                        {convertDate(selectionRange.startDate)} -{' '}
                        {convertDate(selectionRange.endDate)}{' '}
                    </p>
                ) : (
                    <p>dd/mm/YY-dd/mm/YY</p>
                )}
            </Button>

            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'center',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center',
                }}
            >
                <DateRangePicker
                    ranges={[selectionRange]}
                    onChange={handleSelect}
                />
                <div
                    style={{
                        justifyContent: 'right',
                        alignItems: 'flex-end',
                        display: 'flex',
                        paddingRight: 10,
                        paddingBottom: 15,
                    }}
                >
                    <Button
                        style={{
                            width: 100,
                            height: 30,
                            marginRight: 20,
                        }}
                        onClick={() => onCancel()}
                        variant="contained"
                    >
                        <Typography variant={'caption'}>Hu</Typography>
                    </Button>
                    <Button
                        style={{
                            width: 100,
                            height: 30,
                        }}
                        onClick={() => onPress()}
                        variant="contained"
                        color="primary"
                    >
                        <Typography variant={'caption'}>Áp dng</Typography>
                    </Button>
                </div>
            </Popover>
        </div>
    )
}