@material-ui/pickers#DatePicker JavaScript Examples

Datepicker = ({ ...props }) => {
  const [clearedDate, handleClearedDateChange] = React.useState(null);
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        clearable
        label={props.label}
        error={props.error ? props.error : false}
        helperText={props.helperText ? props.helperText : null}
        inputVariant="outlined"
        value={props.value ? props.value : clearedDate}
        onChange={props.onChange}
        format={props.format}
      />
    </MuiPickersUtilsProvider>
  );
}

function YearMonthPicker(props) {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          inputVariant="outlined"
          views={["year"]}
          label={props.label}
          variant="outlined"
          value={props.value}
          onChange={props.onChange}
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

export default function MonthlyScatter() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [plot, setPlot] = useState([])
    const [month, setMonth] = useState(new Date())
    const jwt = auth.isAuthenticated()
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal

        plotExpenses({month: month},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
    const handleDateChange = date => {
        setMonth(date)
        plotExpenses({month: date},{t: jwt.token}).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
    }

    return (
      <div style={{marginBottom: 20}}>
      <Typography variant="h6" className={classes.title}>Expenses scattered over </Typography> 
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <DatePicker value={month} onChange={handleDateChange} views={["year", "month"]}
                 disableFuture
                    label="Month"
                    animateYearScrolling
                    variant="inline"/>
          </MuiPickersUtilsProvider>
        <VictoryChart
                theme={VictoryTheme.material}
                height={400}
                width={550}
                domainPadding={40}
                >
                    <VictoryScatter
                        style={{
                            data: { fill: "#01579b", stroke: "#69f0ae", strokeWidth: 2 },
                            labels: { fill: "#01579b", fontSize: 10, padding:8}
                        }}
                        bubbleProperty="y"
                        maxBubbleSize={15}
                        minBubbleSize={5}
                        labels={({ datum }) => `$${datum.y} on ${datum.x}th`}
                        labelComponent={<VictoryTooltip/>}
                        data={plot}
                        domain={{x: [0, 31]}}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={270} y={390}
                      text={`day of month`}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={6} y={190}
                      angle = {270} 
                      text={`Amount ($)`}
                    />
                </VictoryChart> 
        </div>
    )
  }

export default function Reports() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [year, setYear] = useState(new Date())
    const [yearlyExpense, setYearlyExpense] = useState([])
    const jwt = auth.isAuthenticated()
    const monthStrings = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        yearlyExpenses({year: year.getFullYear()},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          }
            setYearlyExpense(data)
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])

    const handleDateChange = date => {
        setYear(date)
        yearlyExpenses({year: date.getFullYear()},{t: jwt.token}).then((data) => {
          if (data.error) {
            setError(data.error)
          }
            setYearlyExpense(data)
        })
    }
   
    return (
      <div>
          <Typography variant="h6" className={classes.title}>Your monthly expenditures in</Typography>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DatePicker value={year} onChange={handleDateChange} views={["year"]}
                disableFuture
                label="Year"
                animateYearScrolling
                variant="inline"/>
          </MuiPickersUtilsProvider>
          <VictoryChart
                theme={VictoryTheme.material}
                domainPadding={10}
                height={300}
                width={450}>
                <VictoryAxis/>
                <VictoryBar
                    categories={{
                        x: monthStrings
                    }}
                    style={{ data: { fill: "#69f0ae", width: 20 }, labels: {fill: "#01579b"} }}
                    data={yearlyExpense.monthTot}
                    x={monthStrings['x']}
                    domain={{x: [0, 13]}}
                    labels={({ datum }) => `$${datum.y}`}
                />
          </VictoryChart>
      </div>
    )
  }

StatefulDateField = ({ field }) => {
  const {
    label,
    property,
    onChange,
    disabled,
    onValidate,
    validationErrorMsg,
    focus,
  } = field;

  var locale = field.langCode;
  var currentDate = new Date();

  if (locale === "am") {
    const basicDate = ToEthiopian(
      currentDate.getDate(),
      currentDate.getMonth() + 1,
      currentDate.getFullYear()
    );
    const etdate = basicDate.year + "-" + basicDate.month + "-" + basicDate.day;

    currentDate = moment(etdate).format();
  }
  const [value, setValue] = useState(field.value || currentDate);

  const [isValid, setIsValid] = useState(true);

  const firstUpdate = useRef(true); // dont run on mount
  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    if (onValidate) {
      const result = onValidate(value);
      setIsValid(result);
    }
  }, [value, onValidate]);

  const handleDateChange = (date) => {
    const newValue = date.format();
    setValue(newValue);

    if (onChange) {
      onChange(newValue);
    }
  };

  const props = {};
  if (!isValid) {
    props["error"] = true;
    props["helperText"] = !isEmpty(validationErrorMsg)
      ? validationErrorMsg
      : "Incorrect Input";
  } else {
    props["error"] = undefined;
    props["helperText"] = undefined;
  }

  if (focus) {
    props["autoFocus"] = true;
  }

  return (
    <Box>
      <InputLabel shrink>{label}</InputLabel>
      <MuiPickersUtilsProvider utils={MomentUtils} locale={locale}>
        <DatePicker
          id={`${property}-outlined`}
          inputVariant="outlined"
          value={value}
          onChange={(date) => handleDateChange(date)}
          disabled={!!disabled}
          format="LL"
          fullWidth={true}
          autoComplete="false"
          size="small"
          {...props}
        />
      </MuiPickersUtilsProvider>
    </Box>
  );
}

function DateRangePicker({
    classes,
    value = [],
    onChange,
    labelFunc,
    format,
    emptyLabel,
    autoOk,
    onOpen,
    onClose,
    open: openForward,
    ...props
}) {
    const [begin, setBegin] = useState(value[0]);
    const [end, setEnd] = useState(value[1]);
    const [prevBegin, setPrevBegin] = useState(undefined);
    const [prevEnd, setPrevEnd] = useState(undefined);
    const [hasClicked, setHasClicked] = useState(false);

    const [hover, setHover] = useState(undefined);
    const [accepted, setAccepted] = useState(true);
    const utils = useUtils();

    const min = Math.min(begin, end || hover);
    const max = Math.max(begin, end || hover);

    const [open, setOpen] = useState(false);

    const isOpen = openForward !== undefined ? openForward : open;

    useEffect(() => {
        //Only way to get to this state is is openForward is used
        if (isOpen && accepted && !prevBegin && !prevEnd) {
            setAccepted(false);
            setPrevBegin(begin);
            setPrevEnd(end);
            return;
        }
        //Closed without accepting, reset to prev state, don't find onChange
        if (!isOpen && !accepted) {
            setBegin(prevBegin);
            setEnd(prevEnd);
            setHover(undefined);
            setHasClicked(false);
        }
        //Auto ok and hasn't been accepted, but has all the items set, accept and close.
        //This will also triger the on change event by setting isOpen to false
        if (isOpen && autoOk && !accepted && begin && end && hasClicked) {
            setAccepted(true);
            onClose ? onClose() : setOpen(false);
        }
        if (accepted && begin && end && !isOpen && hasClicked) {
            setHasClicked(false);
            onChange({ begin, end });
            onClose ? onClose() : setOpen(false);
        }
    }, [begin, end, autoOk, accepted, isOpen, prevBegin, hasClicked, prevEnd, onChange, onClose]);

    function renderDay(day, selectedDate, dayInCurrentMonth, dayComponent) {
        return React.cloneElement(dayComponent, {
            onClick: e => {
                setHasClicked(true);
                e.stopPropagation();
                if (!begin) setBegin(day);
                else if (!end) {
                    if (utils.isBeforeDay(day, begin)) {
                        setEnd(begin);
                        setBegin(day);
                    } else {
                        setEnd(day);
                    }
                    if (autoOk) {
                        setPrevBegin(undefined);
                        setPrevEnd(undefined);
                    }
                } else {
                    setBegin(day);
                    setEnd(undefined);
                }
            },
            onMouseEnter: () => requestAnimationFrame(() => setHover(day)),
            onFocus: () => requestAnimationFrame(() => setHover(day)),
            className: clsx(classes.day, {
                [classes.hidden]: dayComponent.props.hidden,
                [classes.current]: dayComponent.props.current,
                [classes.dayDisabled]: dayComponent.props.disabled,
                [classes.focusedRange]:
                    (utils.isAfterDay(day, min) && utils.isBeforeDay(day, max)) ||
                    (utils.isSameDay(day, min) && !utils.isSameDay(day, max)) ||
                    (utils.isSameDay(day, max) && !utils.isSameDay(day, min)),
                [classes.focusedFirst]: utils.isSameDay(day, min) && !utils.isSameDay(day, max),
                [classes.focusedLast]: utils.isSameDay(day, max) && !utils.isSameDay(day, min),
                [classes.beginCap]: utils.isSameDay(day, min),
                [classes.endCap]: utils.isSameDay(day, max),
            }),
        });
    }

    const formatDate = date => utils.format(date, format || utils.dateFormat);

    return (
        <DatePicker
            {...props}
            value={begin}
            renderDay={renderDay}
            open={isOpen}
            onOpen={() => {
                setAccepted(false);
                setPrevBegin(begin);
                setPrevEnd(end);
                onOpen ? onOpen() : setOpen(true);
            }}
            onAccept={() => {
                if (!begin || !end) {
                    if (hover && utils.isBeforeDay(begin, hover)) {
                        setEnd(hover);
                    } else {
                        setEnd(begin);
                        setBegin(hover);
                    }
                }
                setPrevBegin(undefined);
                setPrevEnd(undefined);
                // if (!autoOk) {
                setAccepted(true);
                // }
            }}
            onClose={() => {
                onClose ? onClose() : setOpen(false);
            }}
            onChange={() => {}}
            labelFunc={(date, invalid) => {
                if (!isOpen) {
                    if (labelFunc) {
                        return labelFunc([begin, end], invalid);
                    } else {
                        if (date && begin && end) {
                            return `${formatDate(begin)} - ${formatDate(end)}`;
                        } else {
                            return emptyLabel || '';
                        }
                    }
                } else {
                    if (prevBegin && prevEnd) {
                        if (labelFunc) {
                            return labelFunc([prevBegin, prevEnd], invalid);
                        } else {
                            return `${formatDate(prevBegin)} - ${formatDate(prevEnd)}`;
                        }
                    } else {
                        return emptyLabel || '';
                    }
                }
            }}
        />
    );
}

export default function Expenses() {
    const classes = useStyles()
    const [redirectToSignin, setRedirectToSignin] = useState(false)
    const [saved, setSaved] = useState(false)
    const [error, setError] = useState('')
    const [expenses, setExpenses] = useState([])
    const jwt = auth.isAuthenticated()
    const date = new Date(), y = date.getFullYear(), m = date.getMonth()
    const [firstDay, setFirstDay] = useState(new Date(y, m, 1))
    const [lastDay, setLastDay] = useState(new Date(y, m + 1, 0))
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        listByUser({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setRedirectToSignin(true)
          } else {
            setExpenses(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
    const handleSearchFieldChange = name => date => {
        if(name=='firstDay'){
            setFirstDay(date)
        }else{
            setLastDay(date)
        }
    }
    const searchClicked = () => {
        listByUser({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}).then((data) => {
            if (data.error) {
              setRedirectToSignin(true)
            } else {
              setExpenses(data)
            }
        })
    }
    const handleChange = (name, index) => event => {
        const updatedExpenses = [...expenses]
        updatedExpenses[index][name] = event.target.value
        setExpenses(updatedExpenses)
    }
    const handleDateChange = index => date => {
        const updatedExpenses = [...expenses]
        updatedExpenses[index].incurred_on = date
        setExpenses(updatedExpenses)
      }
    const clickUpdate = (index) => {
        let expense = expenses[index]
        update({
            expenseId: expense._id
          }, {
            t: jwt.token
          }, expense).then((data) => {
            if (data.error) {
              setError(data.error)
            } else {
              setSaved(true)
              setTimeout(()=>{setSaved(false)}, 3000)
            }
        })
    }
    const removeExpense = (expense) => {
        const updatedExpenses = [...expenses]
        const index = updatedExpenses.indexOf(expense)
        updatedExpenses.splice(index, 1)
        setExpenses(updatedExpenses)
    }
    
    if (redirectToSignin) {
        return <Redirect to='/signin'/>
    }
    return (
      <div className={classes.root}>
      <div className={classes.search}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    disableFuture
                    format="dd/MM/yyyy"
                    label="SHOWING RECORDS FROM"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={firstDay}
                    onChange={handleSearchFieldChange('firstDay')}
                />
                <DatePicker
                    format="dd/MM/yyyy"
                    label="TO"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={lastDay}
                    onChange={handleSearchFieldChange('lastDay')}
                />      
        </MuiPickersUtilsProvider>
        <Button variant="contained" color="secondary" onClick={searchClicked}>GO</Button>
        </div>
        
      {expenses.map((expense, index) => {
            return   <span key={index}>
        <ExpansionPanel className={classes.panel}>
          <ExpansionPanelSummary
            expandIcon={<Edit />}
          >
            <div className={classes.info}>
                <Typography className={classes.amount}>$ {expense.amount}</Typography><Divider style={{marginTop: 4, marginBottom: 4}}/>
                <Typography>
                    {expense.category}
                </Typography>
                <Typography className={classes.date}>{new Date(expense.incurred_on).toLocaleDateString()}</Typography>  
            </div>
            <div>
                <Typography className={classes.heading}>{expense.title}</Typography>
                <Typography className={classes.notes}>
                    {expense.notes}
                </Typography>
            </div>
          </ExpansionPanelSummary>
          <Divider/>
          <ExpansionPanelDetails style={{display: 'block'}}>
          <div>
              <TextField label="Title" className={classes.textField} value={expense.title} onChange={handleChange('title', index)} margin="normal"/>
             <TextField label="Amount ($)" className={classes.textField} value={expense.amount} onChange={handleChange('amount', index)} margin="normal" type="number"/>
          </div>
          <div>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DateTimePicker
                    label="Incurred on"
                    className={classes.textField}
                    views={["year", "month", "date"]}
                    value={expense.incurred_on}
                    onChange={handleDateChange(index)}
                    showTodayButton
                />
          </MuiPickersUtilsProvider>
          <TextField label="Category" className={classes.textField} value={expense.category} onChange={handleChange('category', index)} margin="normal"/>
          </div>
          <TextField
            label="Notes"
            multiline
            rows="2"
            value={expense.notes}
            onChange={handleChange('notes', index)}
            className={classes.textField}
            margin="normal"
          />
          <div className={classes.buttons}>
          {
            error && (<Typography component="p" color="error">
              <Icon color="error" className={classes.error}>error</Icon>
              {error}</Typography>)
          }
          {
              saved && <Typography component="span" color="secondary" className={classes.status}>Saved</Typography>
          }
            <Button color="primary" variant="contained" onClick={()=> clickUpdate(index)} className={classes.submit}>Update</Button>
            <DeleteExpense expense={expense} onRemove={removeExpense}/>
          </div>    
          </ExpansionPanelDetails>
        </ExpansionPanel>
        </span>
        })}
      </div>
    )
  }

export default function Reports() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [expenses, setExpenses] = useState([])
    const jwt = auth.isAuthenticated()
    const date = new Date(), y = date.getFullYear(), m = date.getMonth()
    const [firstDay, setFirstDay] = useState(new Date(y, m, 1))
    const [lastDay, setLastDay] = useState(new Date(y, m + 1, 0))
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setExpenses(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
   
    const handleDateChange = name => date => {
        if(name=='firstDay'){
            setFirstDay(date)
        }else{
            setLastDay(date)
        }
    }
    const searchClicked = () => {
        averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}).then((data) => {
            if (data.error) {
              setRedirectToSignin(true)
            } else {
              setExpenses(data)
            }
        })
    }
    return (
      <div>
            <div className={classes.search}>
                <Typography variant="h6" className={classes.title}>Expenditures per category </Typography>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    disableFuture
                    format="dd/MM/yyyy"
                    label="FROM"
                    views={["year", "month", "date"]}
                    value={firstDay}
                    className={classes.textField}
                    onChange={handleDateChange('firstDay')}
                />
                <DatePicker
                    format="dd/MM/yyyy"
                    label="TO"
                    views={["year", "month", "date"]}
                    value={lastDay}
                    className={classes.textField}
                    onChange={handleDateChange('lastDay')}
                />      
        </MuiPickersUtilsProvider>
        <Button variant="contained" color="secondary" onClick={searchClicked}>GO</Button>
        </div>
      
                <div style={{width: 550, margin: 'auto'}}>
                <svg viewBox="0 0 320 320">
                
            <VictoryPie standalone={false} data={expenses.monthAVG} innerRadius={50} theme={VictoryTheme.material} 
                labelRadius={({ innerRadius }) => innerRadius + 14 }
                labelComponent={<VictoryLabel angle={0} style={[{
                    fontSize: '11px',
                    fill: '#0f0f0f'
                },
                {
                    fontSize: '10px',
                    fill: '#013157'
                }]} text={( {datum} ) => `${datum.x}\n $${datum.y}`}/>}
                 />
                 <VictoryLabel
          textAnchor="middle"
          style={{ fontSize: 14, fill: '#8b8b8b' }}
          x={175} y={170}
          text={`Spent \nper category`}
        />
        </svg>
                 </div>
        
                
        </div>
    )
  }

AddMedicine = props => {

console.log("addMedicine", Theme, createStyles())
    const [name, setName] = useState('');
    const [type, setType] = useState('');
    const [quantity, setQuanity] = useState(0);
    const [selectedDate, setDate] = useState(null);
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const dispatch = useDispatch();

    const classes = useStyles();
    const handleChange = key => event => {
        // console.log(key, event);
        switch (key) {
            case 'name':
                setName(event.target.value);
                break;
            case 'type':
                setType(event.target.value);
                break;
            case 'quantity':
                setQuanity(event.target.value);
                break;
            case 'selectedDate':
                setDate(event);
                break;
            default:
                return;
        }
    };

    const addMedicine = async () => {
        setLoading(true);
        await dispatch(actions.addMedicine({ name, type, quantity, selectedDate }))
        setLoading(false);
        props.history.push('/app/ims/medicinelist');
    }

    const buttonClassname = classNames({
        [classes.buttonSuccess]: success,
    });

    return (
        // <div >
        <div className="login-content mt-5">
            <Grid container>
            <Grid item xs={2} justify="flex-start" alignItems="center" container>
                <Link to='/app/ims/medicinelist' style={{ textDecoration: 'none', color: 'white' }}>
                    <IconButton type="submit" aria-label="search">
                        <ArrowBackIcon />
                    </IconButton>
                </Link>
            </Grid>
            <Grid item xs={6} justify="flex-start" alignItems="center" container>
                <Typography variant="h5">Add Medicine</Typography>
            </Grid>
            </Grid>

            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <div className="login-form">
                    <div style={{padding: '30px'}}>
                    <form className="row" noValidate autoComplete="off">
                        {/* <div className="col-md-3 col-12"> */}
                        <fieldset>
                            <TextField
                                id="name"
                                label={<IntlMessages id="appModule.medicine.name" />}
                                value={name}
                                onChange={handleChange('name')}
                                data-test="textComp"
                                margin="normal"
                                fullWidth
                                className="mt-1"
                            />
                            <FormControl className="w-100 mb-2">
                                <InputLabel htmlFor="age-native-simple">Type</InputLabel>
                                <Select
                                    native
                                    value={type}
                                    data-test="selectComp"
                                    onChange={handleChange('type')}
                                    input={<Input id="age-native-simple" />}

                                >
                                    <option value="" />
                                    <option value={10}>Liquid</option>
                                    <option value={20}>Tablets</option>
                                    <option value={30}>Capsules</option>
                                    <option value={40}>Topical</option>
                                    <option value={50}>Suppositories</option>
                                    <option value={60}>Drops</option>
                                    <option value={70}>Inhalers</option>
                                    <option value={80}>Injections</option>
                                    <option value={90}>Patches</option>
                                </Select>
                            </FormControl>
                            <TextField
                                id="quantity"
                                label="Quantity"
                                value={quantity}
                                type="number"
                                data-test="quantityComp"
                                onChange={handleChange('quantity')}
                                margin="normal"
                                fullWidth
                                className="mt-1"
                            />
                            <FormControl className="w-100 mb-2">
                                <DatePicker
                                    label="Expiry Date"
                                    value={selectedDate}
                                    onChange={handleChange('selectedDate')}
                                    animateYearScrolling={false}
                                    data-test="dateComp"
                                    className="mt-1"
                                />
                            </FormControl>
                            <div className={classes.wrapper}>
                                <Button onClick={addMedicine} data-test="addMedicineComp" disabled={loading} color="primary" variant="contained" className={buttonClassname}>
                                    <IntlMessages id="appModule.addItem" />
                                    {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
                                </Button>
                            </div>

                        </fieldset>
                        
                    </form>
                    </div>
                </div>
            </MuiPickersUtilsProvider>
        </div>
        // </div>
    )
}