Skip to content

Instantly share code, notes, and snippets.

@sibelius
Created April 1, 2020 13:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sibelius/37e7780c2a4a85ba1fea0b5cff196565 to your computer and use it in GitHub Desktop.
Save sibelius/37e7780c2a4a85ba1fea0b5cff196565 to your computer and use it in GitHub Desktop.
how to use UTC with material-ui-pickers
import MomentUtils from '@date-io/moment';
class MomentUTCUtils extends MomentUtils {
format(value, formatString) {
return this.moment.utc(value).format(formatString);
}
parse(value: string, format: string) {
if (value === '') {
return null;
}
return this.moment.utc(value, format, true);
}
date(value?: any) {
if (value === null) {
return null;
}
const moment = this.moment.utc(value);
moment.locale(this.locale);
return moment;
}
}
export default MomentUTCUtils;
const UTCDatePicker = () => {
return (
<UTCWrapper>
<DatePicker />
</UTCWrapper>
);
}
import React from 'react';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import moment from 'moment';
import MomentUTCUtils from './MomentUTCUtils';
type Props = {
children: React.ReactNode;
};
export const UTCWrapper = ({ children }: Props) => {
return (
<MuiPickersUtilsProvider utils={MomentUTCUtils} locale={'pt-br'} moment={moment}>
{children}
</MuiPickersUtilsProvider>
);
};
@lieblichoi
Copy link

parse(value: "string", format: "string") {
date(value?: "any") {

Hello, please let me know what type of value can fit in that("string" and "any") part.

@sibelius
Copy link
Author

I don't remember \o/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment