CODEWITHSUNDEEP
reactjsmomentjs
Renjith Stephen
Renjith Stephen

Reputation: 95

How to concatenate date and time

I'm taking the date and time separately, and when i am saving i wish to save the date and time together. So please suggest a way that How can i concatenate the date and time together. The code I'm using is given below.

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;

I'm using react-datetime to select date and time.

Upvotes: 0

Views: 624

Answers (2)

Root
Root

Reputation: 2361

I see you have your startTime and endTime with moment(),how about this

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

Upvotes: 1

Madhura KM
Madhura KM

Reputation: 140

Try below.

const startDateTime = this.state.startDate;

startDateTime.set({
    'hour' : this.state.startTime.get('hour')
    'minute'  : this.state.startTime.get('minute'), 
    'second' : this.state.startTime.get('second')
});

Upvotes: 1

Related Questions