Выбор даты: сдвиг часового пояса

Дата и время пользовательского интерфейса материала возвращают локальные значения. Вы можете написать функцию в их функции onChange, чтобы переформатировать дату в любое значение.

  handleTimeInput = (event, time) => {
    this.setState({
      time: time
    })
  }

Затем вы можете сбросить время, которое вы отправляете на сервер, используя простую функцию, подобную приведенной ниже, для преобразования местного времени в UTC.

export default (date) => {
  return new Date(date.getTime() + date.getTimezoneOffset()*60000)
}

(для показа)

export default (date) => {
  const tempDate = new Date(date)
  return new Date(tempDate.getTime() - tempDate.getTimezoneOffset()*60000)
}

Это весь код компонента для моего компа.

class DateTimePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      time: null
    };
  }
  handleDateInput = (event, date) => {
    this.setState({
      date: date
    })
  }
  handleTimeInput = (event, time) => {
    this.setState({
      time: time
    })
  }
  componentDidUpdate(prevProps, prevState) {
    const {setSchedule, channel} = this.props
    if (prevState.date !== this.state.date || prevState.time !== this.state.time) {
      if (this.state.date && this.state.time) {
        setSchedule(convertISTtoUTC(concatenateDateAndTime(this.state.date, this.state.time)), channel)
      }
    }
  }
  render() {
    return (
      <div >
          <DatePicker autoOk={true} onChange={this.handleDateInput} />
          <TimePicker autoOk={true} pedantic={true} onChange={this.handleTimeInput} />
      </div>
    )
  }
}

При этом у вас есть 2 варианта.

1) вы можете напрямую подключить это к редуксу и снимать действия, когда оба выбраны.

https://marmelab.com/admin-on-rest/Actions.html

2) Напишите свой собственный компонент ввода

https://marmelab.com/admin-on-rest/Inputs.html#writing-your-own-input-component

Самый простой вариант — установить пользовательскую функцию в качестве атрибута parse атрибута <DateInput>, которая позволяет манипулировать значением перед входом в хранилище Redux.

const dateString = v => {
  if (isNaN(v)) return;

  let parsedDate = new Date(v);
  let adjustedDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000);

  return adjustedDate;
};

<DateInput source="your_date" parse={dateString} />

Это описано в Admin-on-rest документацию, а дополнительную информацию можно найти в документации по форме Redux на странице Крючки жизненного цикла ценности.

ПРИМЕЧАНИЕ: кредит принадлежит kunal pareek за его предложение о том, как исправить смещение часового пояса. в другом расширенном ответе.

ОБНОВЛЕНИЕ: это может работать неправильно в текущей версии (по состоянию на 08/2018) службы Admin-on-rest. См. ответ от Томаша Мадейского и/или проверьте документацию, в которой проблема была .

Что ж, поскольку редактирование не должно изменять намерение автора, и это слишком долго для редактирования, я добавляю свой собственный ответ на основе tmt ответ:

Вариант использования части parse в порядке, но сама функция неисправна (см. мои комментарии в коде, чтобы понять, почему):

const dateString = v => {
  /* 
  * since v parameter coming is a string then you cannot use isNan 
  * undefined is also coming as a parameter so !v is good equivalent
  */
  if (!v) return; 

  let parsedDate = new Date(v);
  let adjustedDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000);

  /*
  * since parameter coming in is a string you need to pass string further, that's why I added toISOString() call
  */
  return adjustedDate.toISOString();
};

<DateInput source="your_date" parse={dateString} />

Просто установите момент для определенного часового пояса и инициализируйте средство выбора пользовательского интерфейса материала с помощью момента, и да-да.. это сработает..

import moment from 'moment-timezone';
import MomentUtils from '@date-io/moment';
import {DatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';

useEffect(()=>{
    moment.tz.setDefault('Asia/Kolkata');
},[])

<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
               <DatePicker
                  variant='inline'
                  autoOk
                  label=''
                  disableToolbar
                  disableFuture
                  format='MM/DD/YYYY'
                  value={selectedDay}
                  onChange={(day) => {
                    const date = moment(day).format('MM/DD/YYYY');
                    setCurrentDay(date);
                    handleDayChange(day);
                  }}
                  InputProps={{
                    disableUnderline: true,
                    style: {
                      backgroundColor: 'white',
                      paddingLeft: 10,
                      borderRadius: 5,
                      width: 160,
                    },
                    endAdornment: (
                      <InputAdornment position='end'>
                        <CalendarTodayIcon style={{paddingRight: 8}} />
                      </InputAdornment>
                    ),
                  }}
                />
              </MuiPickersUtilsProvider>