Parsing Date and Time from one component to another

c# datetime parse format
c# convert string to datetime yyyymmdd
datetime.parse ruby
datetime parse java
c# datetime parse yyyymmdd
string was not recognized as a valid datetime
date/time parse alteryx
datetime parse time python

I created a component. It needs to return current date and time.

import * as React from 'react';

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }
    }
    render() {
        return (this.date);
    }
}

I need to access this data in component Home and set its time state with the returned value from home.

If my home component is like below,

export class Home extends Component {
    displayName = Home.name

    state = {
        time: null
    };

    handleTime = (timeValue) =>
        this.setState(currentState => ({
            time: timeValue

        }));        

    render() {
        return (
            <div>                 
                <div>
                    <Clock time="handleTime"/>
                </div>
            </div>
        );
    }
}       

What is the mistake I'm doing?

Edit your Home like this

import React, { Component } from "react";
import Clock from "./Clock";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: null
    };
  }
  displayName = Home.name;

  handleTime = timeValue => {
    this.setState({
      time: "timeTest"
    });
  };

  render() {
    return (
      <div>
        <div>
          <Clock time={this.state.time} />
        </div>
        <button onClick={this.handleTime.bind(this)}>Change time</button>
      </div>
    );
  }
}

export default Home;

And your Clock like this:

import React from "react";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      time: props.time
    };
  }
  render() {
    console.log(this.props.time);
    return (
      <div>
        <div>{this.state.date.toString()}</div>
        <div>{this.props.time}</div>
      </div>
    );
  }
}

export default Clock;

Date and Time Methods, Matillion ETL offers a set of proprietary methods for use with Date and .parse("​pattern",stringDate), Parse a piece of a timestamp according to a given pattern. The above methods are useful in combination such that a created date is immediately acted upon by another method. For example, in a Python component: The last example using Parse demonstrates this behavior. In addition to a date and a time component, the string representation of a date and time can include an offset that indicates how much the time differs from Coordinated Universal Time (UTC).

The following code will set the time on your Home component the moment the Clock component is constructed. Not sure this is what you want though.

import * as React from 'react';

class Clock extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          date: new Date()
      }
  }

  componentDidMount() {
      this.props.handleTime(this.state.date);
  }

  render() {
      return <View>{this.state.date.toString()}</View>;
  }
}

And your Home component wasn't referencing your handleTime function the proper way (was missing curly brackets and the 'this' keyword to access class members):

export class Home extends Component {
  displayName = Home.name

  state = {
      time: null
  };

  handleTime = (timeValue) =>
      this.setState(currentState => ({
          time: timeValue
      })
  );        

  render() {
      return (
          <div>                 
              <div>
                <Clock time={this.handleTime} />
              </div>
          </div>
      );
  }
}       

DateTime.Parse Method (System), Parse a date and time string that must be in a particular format. A string with a time component that includes only the hour and an AM/PM designator, or that specify an IFormatProvider object that represents a culture other than the invariant  A string with a date and a time component. A string with a date but no time component. If the time component is absent, the method assumes 12:00 midnight.

  1. Pass the function handleTime to Clock component:

    <Clock time={this.handleTime} />
    
  2. Use prop time at component Clock at constructor

    export default class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          date: new Date()
        }
        props.time(this.state.date); //U pass prop time
      }
      render() {
        return this.state.date.toString(); //return state string not object
      }
    }
    

FileMaker Pro 10: The Missing Manual, You use a timestamp field to record the date and time when each showing starts. You can subtract one timestamp value from another. Just as you can parse bits of text from text fields, FileMaker lets you pull out parts of a date or time value. to pick those individual components from a date, time, or timestamp value. You can simply add the two. if the Time part of your Date column is always zero and the Date part of your Time column is also always zero (base date: January 1, 1900) Adding them returns the correct result.

Convert strings to DateTime, The last example using Parse demonstrates this behavior. In addition to a date and a time component, the string representation of a date and time  If you want the time to be separated, use - =TIME(HOUR(A2),MINUTE(A2), SECOND(A2)) This will separate the time. and then for date, copy the date-time column and paste it, and change the format to only show the date

Learning R: A Step-by-Step Function Guide to Data Analysis, A Step-by-Step Function Guide to Data Analysis Richard Cotton use list indexing to access individual components of a POSIXlt date: now_lt$sec ## [1] 1.19 now_lt[["min"]] ## [1] 47 There are lots of other date and time classes scattered through other R classes. To convert them to dates, we need to parse these strings. If you have worked with time/date formatting/parsing in other languages you might have noticed that the other languages use special placeholders for time/date formatting. For eg ruby language uses %d for day %Y for year etc. Golang, instead of using codes such as above, uses date and time format placeholders that look like date and time only.

Parsing and Formatting (The Java™ Tutorials > Date Time , This date-time Java tutorial describes how to use the java.time APIs To specify a different formatter, you can use the two-argument parse(CharSequence, but this pattern also includes the hour, minutes, and a.m. and p.m. components. The parse () method takes a date string (such as "2011-10-10T14:48:00") and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC. This function is useful for setting date values based on string values, for example in conjunction with the setTime () method and the Date object. Date Time String Format.

Comments
  • HI Thanks. But getting an error like, Objects are not valid as a React child (found: Fri Oct 12 2018 05:57:06 GMT+0530 (Standard Time)). If you meant to render a collection of children, use an array instead. in div (at Clock.js:15) in div (at Clock.js:15) in Clock (at Home.js:37) in div (at Home.js:36) in div (at Home.js:32) in Home (created by Route) in Route (at App.js:12) in div (at App.js:11) in App (at index.js:16) in Router (created by BrowserRouter) in BrowserRouter (at index.js:15)
  • Print state date: this.state.date.toString() not this.state.date
  • A little confused here, what do you want to do in handleTime,the time property want a string property,but you send a function to it.
  • @user3789200 I create a little example here for you. I assume that you want to change the time value with an event like click, then pass the value,not just pass a function to the time value.So I add a button to change the time value. codesandbox.io/s/1jn6mly3j
  • Hi Thanks for replying. return ({this.date}); gives me an error
  • Oh sorry, it should be return ({this.state.date});
  • same syntax error. Saying like this is a reserved keyword
  • ./src/components/Clock.js Syntax error: C:/Users/src/components/Clock.js: this is a reserved word (14:18)
  • I've made some changes to the main answer. I think now I got it right, please try again :)