Unable to get Material-Ui datepicker date on the first change

Question

So I am unable, to get date from material-ui dateandtimepicker on the first select, somehow, i get value only on second click, and that value is previous one, Also would love to know if there is any other way to convert date to format like this yyyy:mm:dd:hh:mm without using moment.js

Here is my code:

import React, { Component } from 'react'
import DataPicker from './UI-components/DataPicker'

class EventForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      errors: {},
      start:'',
      end:''
    }
  }

  onChange1(e) {
    this.setState({
      start: e.target.value,
    });
    console.log(this.state.start)
  }

  render() {
    return (
      <div>
        <DataPicker
          label="Event Starts"
          onChange={this.onChange1.bind(this)} 
          defaultas="2017-05-24T10:30"
        />
      </div>
    )
  }
}
export default EventForm;

DatePicker.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 300,
  },
});

function DateAndTimePickers(props) {
  const { classes } = props;

  return (
    <form className={classes.container} noValidate>
      <TextField
        id="datetime-local"
        label={props.label}
        type="datetime-local"
        defaultValue={props.defaultas}
        className={classes.textField}
        onChange = {props.onChange} 
        value = {props.value} 
        InputLabelProps={{
          shrink: true,
        }}
      />
    </form>
  );
}

DateAndTimePickers.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(DateAndTimePickers);

Answer 1

You are not passing down the value to the DatePicker component. You could use start as value to control the DatePicker and ignore the defaultValue entirely.

The reason why console.log(this.state.start) in your onChange1 handler isn't displaying the start you would think is because setState is asynchronous, which means this.state.start will not have been updated yet.

class EventForm extends Component {
  state = {
    text: '',
    errors: {},
    start: '2017-05-24T10:30',
    end: ''
  };

  onChange1 = (e) => {
    this.setState({
      start: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <DataPicker
          label="Event Starts"
          onChange={this.onChange1}
          value={this.state.start}
        />
      </div>
    )
  }
}

Answer 2

Well you are getting old one means last set value in state cause you are doing things simultaneously/parallelly both set value and console value. Means you know JS is async you are doing here

 onChange1(e) {
    this.setState({
      start: e.target.value,
    });
    console.log(this.state.start)
  }

what is happening here setting the new value to state and console current/last/default(first time) state value, That's why you are getting it the second time.

to get current one do like this:

onChange1(e) {
        this.setState({
          start: e.target.value,
        },function(whatever){
          console.log(this.state.start)
        });
     }

it will execute and console value once your set state is done.

And for formatting date without momentjs you can find the source of momentjs what they are doing under the hood obviously they are using JS. If I were you I'll do this way. Haha

Answer 3

i don't know much about react but this might help with the formatting of the dates;

<td>
{new Intl.DateTimeFormat('en-GB', { 
    year: 'numeric', 
    month: 'long', 
    day: '2-digit' 
}).format(customer.firstSale)}
</td>

Example from here;