React CoralUI Playground

by operatino

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/js/libs/jquery.js"></script>
<script src="https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/js/libs/moment.js"></script>
<script src="https://use.typekit.net/ruf7eed.js"></script>
<script src="https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/js/coral.js"></script>
<link rel="stylesheet" href="https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/css/coral.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Hello = React.createClass({
  componentDidMount: function(){
    this.calendar = new Coral.Calendar().set({
      value: "2016-07-1T00:00+02:00",
      valueFormat: "YYYY-MM-DD[T]HH:mmZ"
    });  
		this.calendarEl = this.refs.calendar.appendChild(this.calendar);
  },
  
  changeDate: function(e) {
  	this.calendarEl.value = '2016-08-25T00:00+02:00'
  },

  render: function() {
    return (
	    <div>
	      <div>
      		<button onClick={this.changeDate}>Change Date</button> 
        </div>
        <div ref='calendar'></div>
			</div>
		)
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);