Trying to Present in UTC, and Save in UTC. Cannot get data without timezone conversion

Environment

Tech	Version
material-ui-pickers	1.0.0-rc.4
material-ui	1.0.0-beta.33
React	16.2.0
Browser	Chrome
Platform

Steps to reproduce

1. Date & Time Picker Basic Example

Expected behavior

Component to send me back either: A) Format like so: 2018-04-04T13:48:00.000Z B) Accept my UTC=true flag, and NOT apply a timezone conversion as it is here: Fri Apr 20 2018 10:28:00 GMT-0700 (PDT)

Actual behavior

i) I can only receive the 2018-04-04T13:48:00.000Z format when I wrongly send a default value date string yyyy-mm-dd. This comes through as {}._i when the component submits. As soon as I send the proper selectedValue through, the {}._I property becomes Fri Apr 20 2018 10:28:00 GMT-0700 (PDT). ii) Am am applying UTC=true to the component. I can see _isUTC as true in the submission object. But the datetime format is still having the PDT conversion applied.

import React from 'react';
import moment from 'moment-timezone';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
import { DateTimePicker } from 'material-ui-pickers';

moment.tz.setDefault('UTC');

function DateAndTimePicker(props) {
  const { handleChange, label, selectedDate } = props;

  return (
    <MuiPickersUtilsProvider
      moment={ moment }
      utils={ MomentUtils } >
      <DateTimePicker
        disablePast
        label={ label }
        onChange={ handleChange }
        value={ selectedDate }
      />
    </MuiPickersUtilsProvider>
  );
}


export default DateAndTimePicker;

[tendermario]

I think he’s wanting the date to display in UTC instead of the local timezone, as the two expected behaviours listed are both in UTC. Is this possible?

[sibelius]

this is my working solution

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;

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>
  );
};

usage:

<UTCWrapper>
   <DatePicker />
</UTCWrapper>

Using this could cause more harm then good