Datum von Json in gewisser Weise

Question

Im sie ein api Anfrage angezeigt, möchte ich wie dieses https://www.behance.net/gallery/41658891/Rockefeller-Oslo-Website-Redesign

Im Empfang des json wie diese

dates: { 
      start: { 
      localDate: "2017-04-06", 
      localTime: "19:31:00", 
      dateTime: "2017-04-06T23:31:00Z", 
      dateTBD: false, 
      dateTBA: false, 
      timeTBA: false, 
      noSpecificTime: false 
      }, 
     timezone: "America/New_York", 
     status: { 
     code: "onsale" 
     } 
    }, 

ich bereits das Datum angezeigt, aber angezeigt werden kann, wie kann ich schalte den json in pic verwandt, das ist, wie im Rendering, im reagieren mit

     <DateResult_h1 > 
         {item.dates.start.localDate} 
        </DateResult_h1 > 

Answer 1

ich glaube, was Sie in den Link bezieht sich wahrscheinlich mit photoshop erstellt, aber Sie c ein ähnliches erreichen mit CSS.

var months = [ "January", "February", "March", "April", "May", "June", 
    "July", "August", "September", "October", "November", "December" ]; 

var dates = 
      { 
         start: 
         { 
         localDate: "2017-04-06", 
         localTime: "19:31:00", 
         dateTime: "2017-04-06T23:31:00Z", 
         dateTBD: false, 
         dateTBA: false, 
         timeTBA: false, 
         noSpecificTime: false 
         }, 
        timezone: "America/New_York", 
        status: 
        { 
         code: "onsale" 
        } 
       } 

var DatePicto = React.createClass 
({ 

    render: function() 
    { 
    var dateObj = this.props.dateProp.start.localDate; 

    var date = dateObj.split('-')[2]; 
    var month = months[parseInt(dateObj.split('-')[1]) - 1]; 

    return (
     <div className="divContainer1"> 
      <div className="month">{month}</div> 
      <div className="date">{date}</div> 
     </div> 
     ) 
    } 
}); 


ReactDOM.render 
(
<div> 
    <DatePicto dateProp={dates} /> 
    </div>, 
    document.getElementById('container') 
); 

Beispiel: https://jsfiddle.net/69z2wepo/73684/