Date is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:
import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../ actions/statistics';
import Moment from 'moment';
export default class GeneralReport extends React.Component {
render () {
//const { stat } = this.props;
//console.log(this.props.stat)
return (
<div className = "general_report">
<header className = "general_report_head">General Report</header>
<div className="report_dates">
From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
</div>
<div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
<div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
</div>
);
}
}
Reference: http://momentjs.com/
U can use the Date object method toDateString() also, try this:
<div className="report_dates">
From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>
Answer from Mayank Shukla on Stack OverflowDate is an object, you cant render it directly in ui, convert the date object to string first. You already imported moment, use the format function, try this:
import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../ actions/statistics';
import Moment from 'moment';
export default class GeneralReport extends React.Component {
render () {
//const { stat } = this.props;
//console.log(this.props.stat)
return (
<div className = "general_report">
<header className = "general_report_head">General Report</header>
<div className="report_dates">
From<span className="number">{Moment(this.props.stat.dateFrom).format('YYYY-MM-DD')}</span>
To<span className="number">{Moment(this.props.stat.dateTo).format('YYYY-MM-DD')}</span>
</div>
<div className="report_main_result"> Total Revenue: <span className="number">{this.props.stat.revenue}</span></div>
<div className="report_main_result"> Total orders: <span className="number">{this.props.stat.order}</span></div>
</div>
);
}
}
Reference: http://momentjs.com/
U can use the Date object method toDateString() also, try this:
<div className="report_dates">
From<span className="number">{this.props.stat.dateFrom.toDateString()}</span>
To<span className="number">{this.props.stat.dateTo.toDateString()}</span>
</div>
This should work and not give you any error.
import React, { PropTypes } from 'react';
import classnames from 'classnames';
import Actions from '../../actions/statistics';
import moment from 'moment';
export default class GeneralReport extends React.Component {
render () {
const { stat } = this.props
const { dateFrom, dateTo, revenue, order } = stat
return (
<div className="general_report">
<header className="general_report_head">
General Report
</header>
<div className="report_dates">
From
<span className="number">
{moment(dateFrom).format('YYYY-MM-DD')}
</span>
To
<span className="number">
{moment(dateTo).format('YYYY-MM-DD')}
</span>
</div>
<div className="report_main_result">
Total Revenue:
<span className="number">
{revenue}
</span>
</div>
<div className="report_main_result">
Total orders:
<span className="number">
{order}
</span>
</div>
</div>
);
}
}
It can be done by using following code:
let today = new Date();
let date=today.getDate() + "-"+ parseInt(today.getMonth()+1) +"-"+today.getFullYear();
console.log(date)
The moment library is awesome for all action/formatting that you want to do on date.
Have a look: https://momentjs.com/
You should do something like this:
import * as moment from 'moment'
const yourDate = new Date()
const NewDate = moment(yourDate, 'DD-MM-YYYY')
Your problem is that you are naming your component class Date. When you call new Date() within your class, it won't create an instance of the Date you expect it to create (which is likely this Date)- it will try to create an instance of your component class. Then the constructor will try to create another instance, and another instance, and another instance... Until you run out of stack space and get the error you're seeing.
If you want to use Date within your class, try naming your class something different such as Calendar or DateComponent.
The reason for this is how JavaScript deals with name scope: Whenever you create a newly named entity if there is already an entity with that name in scope, that name will stop referring to the previous entity and start referring to your new entity. So if you use the name Date within a class named Date, the name Date will refer to that class and not to any object named Date which existed before the class definition started.
OPTION 1: if you want to make a common utility function then you can use this
export function getCurrentDate(separator=''){
let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();
return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}
and use it by just importing it as
import {getCurrentDate} from './utils'
console.log(getCurrentDate())
OPTION 2: or define and use in a class directly
getCurrentDate(separator=''){
let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();
return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}
» npm install react-date-object
One-liner with date and time:
date.toISOString().slice(0,19).replace("T"," ");
which gives this format: "2024-07-07 13:21:41"
Yet another combination of the answers. Nicely readable, but a little lengthy.
function getCurrentDayTimestamp() {
const d = new Date();
return new Date(
Date.UTC(
d.getFullYear(),
d.getMonth(),
d.getDate(),
d.getHours(),
d.getMinutes(),
d.getSeconds()
)
// `toIsoString` returns something like "2017-08-22T08:32:32.847Z"
// and we want the first part ("2017-08-22")
).toISOString().slice(0, 10);
}