I'm using Material UI datepicker in a React project. I've created a calendar + time selection (code below). For some reason when I test this on Chrome desktop using the device toolbar to emulate iphone 8 it works fine, but when I go to the site on my actual iphone 8, the UI is broken (images below). Any thoughts?
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'row',
padding: theme.spacing(3),
[theme.breakpoints.down('sm')]: {
padding: 0,
},
},
picker: {
display: 'flex',
flexDirection: 'row',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
timeContainer: {
display: 'flex',
flexDirection: 'column',
marginLeft: theme.spacing(2),
overflowY: 'scroll',
[theme.breakpoints.down('sm')]: {
alignItems: 'center',
marginLeft: 0,
marginBottom: theme.spacing(3),
},
},
timeButton: { width: 226, height: 50 },
}));
export default function Timesgrid(props) {
const classes = useStyles();
const [selectedDate, setSeletedDate] = useState(moment());
const disableDay = date => {
const formattedDate = moment(date).format('YYYY-MM-DD');
return formattedDate in props.availability &&
props.availability[formattedDate].length > 0
? false
: true;
};
const handleDateChange = date => {
setSeletedDate(moment(date));
};
const renderTimes = () => {
const dateStr = moment(selectedDate).format('YYYY-MM-DD');
const availability = props.availability[dateStr];
return availability && availability.length ? (
<div className={classes.timeContainer}>
{availability.map((time, i) => (
<Button
style={{ marginTop: i === 0 ? 0 : 10 }}
key={time}
className={classes.timeButton}
variant="outlined"
color="primary"
onClick={() => props.onDatetimeSelected(moment(time))}
>
<b>{moment(time).format('LT')}</b>
</Button>
))}
</div>
) : (
<Typography variant="h6" className={classes.timeContainer}>
No availability
</Typography>
);
};
const renderPicker = () => {
return (
<div className={classes.picker}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
disablePast
shouldDisableDate={disableDay}
variant="static"
defaultValue={selectedDate}
value={selectedDate}
onChange={handleDateChange}
/>
</MuiPickersUtilsProvider>
{renderTimes()}
</div>
);
};
return <div className={classes.root}>{renderPicker()}</div>;
}
Timesgrid.propTypes = {
availability: PropTypes.object.isRequired,
onDatetimeSelected: PropTypes.func.isRequired,
};
question from:
https://stackoverflow.com/questions/65950193/material-ui-date-picker-behaving-differently-on-mobile-device 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…