Как преобразовать дату в формате UTC в "MM / DD / YYYY" для реагирующего средства выбора даты? - PullRequest
Новая
       15

Как преобразовать дату в формате UTC в "MM / DD / YYYY" для реагирующего средства выбора даты?

0 голосов
/ 08 ноября 2019

Я использую response-datepicker в компоненте для обновления сообщений. Дата и другие данные передаются компоненту из MongoDB через props. Это простое приложение fullstack-graphql с функцией CRUD. Возможно проблема в правильном преобразовании даты. Формат вводимой даты, получаемой через реквизиты, - это метка времени Unix, например «1573227729064». Формат «DatePicker» должен быть «MM / DD / YYYY». Я прочитал документы и настроил DatePicker, но по какой-то причине он не отображается. Может быть, кто-то может объяснить мне, глядя на код ниже. Буду очень признателен за любую помощь! 

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { EditorState, getCurrentContent, getPlainText, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateToHTML } from 'draft-js-export-html';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { stateFromHTML } from 'draft-js-import-html';

const updateMutation = gql`
  mutation UpdateHeroMutation($id: ID!, $title: String!, $description: String!, $date: String!) {
  updateHero(heroUpdate: {_id: $id, title: $title, description: $description, date: $date}) {
    _id
    title
    description
    date
  }
}
`;

class Hero extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.data.title,
      setDate: props.data.date,
      editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
    };
  }
  onChange(e) {
    this.setState({ title: e.target.value })
  }
  onChangeSelect(published) {
    this.setState({ setDate: published })
  }
  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  }
  render() {
    return (
      <>
        <h5>Edit post</h5>
        <div className="label-section">Name:</div>
        <h5>
          <input name="title" id="title" type="text" defaultValue={this.props.data.title} onChange={e => this.onChange(e)} />
        </h5>
        <br />
        <div className="label-section">Published:</div>
        <DatePicker
          id="published"
          name="published"
          defaultValue=""
          dateFormat="MM/DD/YYYY"
          selected={Date(this.state.setDate)}
          onChange={published => this.onChangeSelect(published)}
        />
        <h5>{this.state.setDate}</h5>
        <div className="label-section">Edit text:</div>
        <Editor
          editorState={this.state.editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <input type="text" className="hidden" defaultValue={this.props.data._id} />
        <Mutation mutation={updateMutation} variables={{ id: this.props.data._id, title: this.state.title, description: stateToHTML(this.state.editorState.getCurrentContent()), date: this.state.setDate }}>
          {updateHero => (
            <button onClick={updateHero} type="submit">OK</button>
          )}
        </Mutation>
      </>
    );
  }
}

export default Hero;

1 Ответ

2 голосов
/ 08 ноября 2019

Вам нужно инициализировать дату в 

this.state = {
  title: props.data.title,
  setDate: new Date(props.data.date),
  editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
};

и 

<DatePicker
      id="published"
      name="published"
      defaultValue=""
      dateFormat="MM/DD/YYYY"
      selected={this.state.setDate}
      onChange={this.onChangeSelect}
    />
...