React.js Bootstrap

by codemeasandwich

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="panel panel-default">
  <div class="panel-heading">JSON DATA</div>
  <div class="panel-body" id="json-data">
    {
  "window_data" : [
   {
     "name" : "Foo", 
     "start" : "2015-04-01T00:00:00.000Z", 
     "end" : "2015-04-10T00:00:00.000Z"
   },
   {
     "name" : "Bar", 
     "start" : "2015-04-03T00:00:00.000Z", 
     "end" : "2015-04-11T00:00:00.000Z"
   },
   {
     "name" : "Baz", 
     "start" : "2015-04-10T00:00:00.000Z", 
     "end" : "2015-04-12T00:00:00.000Z"
   }
  ],
  "window_keys" : {
     "name" : "Window name", 
     "start" : "Start date", 
     "end" : "End date"
  },
  "data_formats" : {
     "name" : "string", 
     "start" : "date", 
     "end" : "date"
  }
}
  </div>
</div>

    <div id="container"></div>
</div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body{margin:40px;}


.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

JavaScript 1.7

/** @jsx React.DOM */

//=====================================================
//====================================== JSON Utilities
//=====================================================

var getJson = function(elemID){
	var json = JSON.parse(document.getElementById(elemID).innerHTML);
  
  json.window_data = json.window_data.map(function(entry){
  	
    for(var name in entry){
    	if("date" === json.data_formats[name]){
      entry[name] = new Date(entry[name])
      }
    }
    return entry;
    
  })
  return json;
}

var setJson = function(elemID,jsonString){
console.log(jsonString);
console.log(JSON.stringify(jsonString));
	document.getElementById(elemID).innerHTML = JSON.stringify(jsonString);
}

//=====================================================
//========================================== DatePicker
//======= FROM == http://jsfiddle.net/jhudson8/pnsf0sky/

var DatePicker = React.createClass({
    _destroyDatePicker: function() {
        var element = this.getDOMNode();
        $(element).datepicker('destroy');
    },

    _initDatePicker: function() {
        var element = this.getDOMNode();
        // or in >= 0.13 
        // var element = React.findDOMNode(this);
        $(element).datepicker(this.props);    
    },

    componentDidMount: function() {
        this._initDatePicker();
    },
    
    componentWillReceiveProps: function(props) {
        // could be optimized better to invoke functions on
        // active plugin based on property values
        this._destroyDatePicker();
    },

    componentDidUpdate: function() {
        this._initDatePicker();
    },

    componentWillUnmount: function() {
        this._destroyDatePicker();
    },

    render: function() {
        return <input type="text" {...this.props}/>
    }
});

//=====================================================
//============================================ Main App
//=====================================================

var App = React.createClass({
	
 ...