reactjs - 如何连接日期和时间

Question

我将日期和时间分开，当我保存时，我希望将日期和时间一起保存。所以请提出一种方法，我如何将日期和时间连接在一起。我正在使用的代码如下所示。

import React, { Component, Fragment  } from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import Datetime from 'react-datetime';
import { Button, Card, CardBody, CardFooter, CardHeader, Col, Row, Form, Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Input } from 'reactstrap';
import 'react-datepicker/dist/react-datepicker.css';
import '../../../node_modules/react-datetime/css/react-datetime.css';

class NewCreation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      startTime: moment(),
      endDate: moment(),
      endTime: moment(),
    };
    this.submitClick = this.submitClick1.bind(this)
  }

  handleStartDate(date) {//selectedDate:moment()
    this.setState({startDate: moment(date).format('LL')});
    this.forceUpdate()
  }
  handleStartTime(time) {
    this.setState({ startTime: moment(time).format('HH:mm:ss') });
    this.forceUpdate()
  }
  handleEndDate(date) {
    this.setState({ endDate: moment(date).format('LL') });
    this.forceUpdate()
  }
  handleEndTime(time) {
    this.setState({ endTime: moment(time).format('HH:mm:ss') });
    this.forceUpdate()
  }

// SAVING Details
  submitClick(e){
        //on saving i wish to save the date and time together like ---> "2018-10-30 00:00:00.000"
  }

  render() {
    return (
      <Row>
        <Col md="12">
                <Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
                  <FormGroup row>
                    <Col md="3"><span>Start Date</span><Datetime dateFormat={true} timeFormat={false} onChange={this.handleStartDate.bind(this)}/></Col>
                    <Col md="3"><span>Start Time</span><Datetime dateFormat={false} timeFormat={true} onChange={this.handleStartTime.bind(this)}/></Col>
                    <Col md="3"><span>End Date</span><Datetime dateFormat={true} timeFormat={false} onChange={this.handleEndDate.bind(this)}/></Col>
                    <Col md="3"><span>End Time</span><Datetime dateFormat={false} timeFormat={true} onChange={this.handleEndTime.bind(this)}/></Col>
                  </FormGroup>
                </Form>
              <div className="card-header-actions">
              <Button type="button" size="sm" color="primarydark" onClick={this.submitClick}><i className="fa fa-dot-circle-o"></i> <span>Save And Continue</span></Button>
              </div>
        </Col>
      </Row>
    );
  }
}
export default NewCreation;

我正在使用 react-datetime 来选择日期和时间。

标签： reactjsmomentjs

Answer 1

我看到你有你的 startTime 和 endTime 与 moment()，这个怎么样

submitClick(e){
      this.setState({
        fullTime: moment().format(); // 2018-10-12T15:27:30+08:00
     })
  }