Comments (8)
Thanks for your replies!
Unfortunately, the project I am working on recently made the switch from moment to dayjs, and I can't make the switch to Luxon, because of the differences in API between Luxon and Dayjs.
I think I'm going to wait a release of a fix for this problem by DayJS mainteners and stay with the fix I sent in my previous message for the meantime.
from mui-x.
I encountered the same issue 😔
from mui-x.
Note that I think I fixed this issue on my codebase by doing something like
export const CustomDesktopDatePicker = () => {
const [lastDate, setLastDate] = useState(null)
return (
<DesktopDatePicker
onChange={(date) => {
const nativeDate = date?.toDate()
if (!nativeDate) {
return
}
if (
lastDate &&
nativeDate.getTimezoneOffset() !==
lastDate.getTimezoneOffset()
) {
nativeDate.setHours(0, 0, 0, 0)
}
if (dayjs(nativeDate).isValid()) setLastDate(nativeDate)
}}
/>
)
}
from mui-x.
My apologies ... I was not aware that it is in maintenance mode. I just picked it because I am the most familiar with this package! :D
Of course you can also do this with luxon instead. Here is an example implementation for it:
import { useState } from 'react';
import { DateTime } from 'luxon';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers';
const CompTest = () => {
const [value, setValue] = useState<DateTime | null>(DateTime.utc(2024, 1, 1, 0, 0, 0, 0));
return (
<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={'de'}>
<DesktopDatePicker
value={value}
onChange={(value) => {
setValue(value);
}}
/>
<p>Date: {value?.toString()}</p>
</LocalizationProvider>
);
};
export default CompTest;
from mui-x.
Thanks for your replies!
Unfortunately, the project I am working on recently made the switch from moment to dayjs, and I can't make the switch to Luxon, because of the differences in API between Luxon and Dayjs. I think I'm going to wait a release of a fix for this problem by DayJS mainteners and stay with the fix I sent in my previous message for the meantime.
Good to hear that your solution for this is working for you. 👍🏼
And sorry that we could not help you in a better way! 🙇🏼
from mui-x.
The problem is that the introduction of UTC and timezones is faulty in Dayjs.
I would advice you to use moment
instead:
import { useState } from 'react';
import { Moment } from 'moment';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers';
const CompTest = () => {
const [value, setValue] = useState<Moment | null>(null);
return (
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'de'}>
<DesktopDatePicker
value={value}
onChange={(value) => {
setValue(value);
}}
/>
<p>Date: {value?.toString()}</p>
</LocalizationProvider>
);
};
export default CompTest;
There are open issues on the dayjs packages (and even open PRs - one from me), but the maintainer seems to be inactive. Example PR
EDIT
Example with Luxon below: #11955 (comment)
from mui-x.
I would advice you to use
moment
instead:
Would using luxon
also work? 🤔
moment
has been in maintenance mode for quite some time, IMHO, we should not be recommending users jump into this library at this point. 🙈
from mui-x.
I will close this issue for now, but feel free to reopen if you have any further questions regarding this topic!
from mui-x.
Related Issues (20)
- [data grid] CSV export adds malformed/buggy characters HOT 2
- [TreeView] Expose the item slots at the tree view level
- [data grid] Is Clipboard cut available? HOT 1
- [data grid] Save / Restore state with dynamic columns HOT 1
- [pickers] dayjs with default timezone broke picker HOT 2
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 3
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 4
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 6
- New sets of components HOT 5
- [charts] BarChart legend overlaps charts area HOT 2
- [pickers] Recipes HOT 1
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 5
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 1
- [charts] Support single color area chart HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.