Develop Reference

DateTimePicker seems to be an hour off?

I have the following code in my React application:
import { DateTimePicker, LocalizationProvider } from "#mui/x-date-pickers";
import { AdapterMoment } from "#mui/x-date-pickers/AdapterMoment";
import moment from "moment";
...
const [job, setJob] = useState({
name: "",
outgoingDateTime: moment("2022-09-01T21:00:00"),
});
const handleOutgoingDateTimeChange = (newValue) => { setJob({...job, outgoingDateTime: newValue}); }
...
<LocalizationProvider dateAdapter={ AdapterMoment }>
<Stack spacing={2} direction="row">
<DateTimePicker
label="Outgoing Date and Time"
value={ job.outgoingDateTime }
onChange={ handleOutgoingDateTimeChange }
inputFormat="DD/MM/YYYY HH:mm"
ampm={ false }
renderInput={(params) => <TextField {...params} />} />
</Stack>
</LocalizationProvider>
When I then enter something like 2022-09-13T21:05:00.000Z into the DateTimePicker and then submit and output the result, I have this:
Job Outgoing Date Time: "2022-09-13T20:05:00.000Z"
Which is clearly an hour behind what I've tried to submit which is not what I want as I asked for 21:05 for example. How can I fix this to show the correct time when I submit it?

How to set onChange for KeyboardDatePicker in JalaliUtils?

I use material-ui/pickers And the datetime I want to have is jalali.This is the code I used:
import jMoment from "moment-jalaali";
import JalaliUtils from "#date-io/jalaali";
import {
DatePicker as MuiDatePicker,
MuiPickersUtilsProvider,
KeyboardDatePicker,
KeyboardDateTimePicker
} from "#material-ui/pickers";
const [selectedDate, handleDateChange] = useState(new Date);
return (
<MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">
<KeyboardDateTimePicker
ampm={false}
disablePast
//format="jYYYY/jMM/jDD HH:mm:ss"
utils={JalaliUtils}
fullWidth
name={props.name}
label={props.label}
variant="inline"
inputVariant="outlined"
autoOk
labelFunc={(date) => (date ? date.format("jYYYY/jMM/jDD hh:mm:ss") : "")}
id={props.id}
value={selectedDate}
onChange={handleDateChange}
/>
</MuiPickersUtilsProvider>
The datetime changes when I select a datetime
but when I try, I can not override the date with the keyboard.

MUI Datepicker how to disable next month only

I'm using MUI v5 and I want to disable next month only in datepicker. Others are available

import moment from 'moment';
const isNextMonth = (date) = {
const startOfNextMonth = moment().add(1, 'month').startOf('month');
const endOfNextMonth = moment().add(1, 'month').endOf('month');
return date >= startOfNextMonth && date <= endOfNextMonth;
};
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
views={['year', 'month', 'day']}
label={label}
shouldDisableDate={isNextMonth}
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} helperText={null} />}
/>
</LocalizationProvider>

Geeting value differance in MUI date picker

I am using Mui 5 date picker my issue is if I change the date using calendar I will get the expected result like the example I selected 26 I get this
"2022-01-26T09:16:10.000Z"
but when I edit directly in the field example I selected 27 I get this
"2022-01-26T18:30:00.000Z" because of this I will get a validation error I am not understanding why this happening and after the edit, if the select date from again calendar 26 then the final value is
"2022-01-25T18:30:00.000Z"
for external I am using momentjs and fromik.
const [value, setValue] = React.useState(null);
return (
<Box>
{JSON.stringify(value)}
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</Box>
);

Using moment, set the initial value to start of the day startOf.
const [value, setValue] = React.useState(moment().startOf('day'))
Code snippet:
export default function BasicDatePicker() {
const [value, setValue] = React.useState(moment().startOf('day'));
return (
<LocalizationProvider dateAdapter={AdapterMoment} >
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(moment(newValue));
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
Sandbox : here
EDIT:
if you have a specific date to be passed,
React.useState(moment('03-03-2021').startOf("day"))

how to enable and disable previous and future date on react-native-community/datetimepicker in React Native

I have implemented the date-picker in my app. i used the react-native-community/datetimepicker package for date-picker. But i have to add the custom option/methods ,by using that i can enable and disable the dates and also want to disable the previous dates. I am unable to implement it. Also the date time is not updating continuously. So please suggest any solution.
Code:
import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '#react-native-community/datetimepicker';
export const CustomDatePicker = () => {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};

Refer react-native-community/datetimepicker documentation
For minDate which determines the eldest date you can pick: https://www.npmjs.com/package/#react-native-community/datetimepicker#minimumdate-optional
For maximumDate which determines the newest date you can pick: https://www.npmjs.com/package/#react-native-community/datetimepicker#minimumdate-optional
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
minimumDate={new Date(2020, 0, 1)}
maximumDate={new Date(2022, 10, 20)} />