CODEWITHSUNDEEP
reactjsmomentjs
user8352964
user8352964

Reputation:

Reactjs - Moment

Am not able to parse the date from mongodb and render in textbox.

Mongodb date format is : mmm dd yyyy hh mm ss a

<input 
    name="date" 
    type="date" 
    disabled={ this.state.mode } 
    value={ this.state.item.date ? 
       <Moment format="DD-MMM-YYYY">{ this.state.item.date }</Moment> : null } 
    className="form-control" 
    onChange={ this.handleInputChange } />

Am trying with the above code. Please suggest..

Upvotes: 1

Views: 2545

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281894

You can make use of moment.js library. Install it as a package dependency like

npm install -S moment

Then use it in your input like

<input 
name="date" 
type="date" 
disabled={ this.state.mode } 
value={ this.state.item.date ? moment(new Date(this.state.item.date)).format("DD-MMM-YYYY"): ''} 
className="form-control" 
onChange={ this.handleInputChange } />

DEMO:

var data = 'Thu Dec 29 2011 20:14:56 GMT-0600 (CST)';
console.log(moment(new Date(data)).format("DD-MMM-YYYY"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

Upvotes: 0

David Villarreal
David Villarreal

Reputation: 256

Use the parse option like this

<input 
    name="date" 
    type="date" 
    disabled={ this.state.mode } 
    value={ this.state.item.date ? 
       <Moment format="DD-MMM-YYYY" parse="MMM DD YYYY hh mm ss a">{ this.state.item.date }</Moment> : null } 
    className="form-control" 
    onChange={ this.handleInputChange } />

Upvotes: 1

Ritesh Bansal
Ritesh Bansal

Reputation: 3248

You can use moment npm for doing this:

import moment from 'moment'

<input 
   name="date" 
   type="date" 
   disabled={ this.state.mode } 
   value={ this.state.item.date ? moment(this.state.item.date).format('DD-MMM-YYYY') : null } 
   className="form-control" 
   onChange={ this.handleInputChange } />

You can study here for more details.

Upvotes: 0

Related Questions