JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://rawgithub.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script src="https://rawgithub.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.modelbinder/0.1.3/Backbone.ModelBinder-min.js"></script>
<script src="https://rawgithub.com/moment/moment/develop/moment.js"></script>
<script id="date-picker" type="text/template">
<input type="text" class="from" name="ReceievedDate" />
-
<input type="text" class="to" name="ReceievedDate" />
</script>
<script id="container-view" type="text/template">
    <button class="load"> load</button>
    <span class="dateRange"></span>
</script>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    padding : 5px;
    border : 1px solid #ccc;
}

JavaScript

var MyApp = {};

/*views*/
MyApp.DateRangeView = Backbone.Marionette.ItemView.extend({
    template: "#date-picker",
    date: {
        "startDate": "",
            "endDate": ""
    },
    startDateConverter: function (direction, value) {
        if (direction === "ViewToModel") {
            var startDate = this.viewEl.$(".from").datepicker("getDate");
            var endDate = this.viewEl.$(".to").datepicker("getDate");
            //if the start date and end date are not null
            // and start date is greater than end date
            if (startDate && endDate) {
                //set the start date to end date
                if (startDate > endDate) {
                    endDate = startDate;
                }
            }
            if (startDate) {
                this.viewEl.date.startDate = moment(startDate).format('L')
            }
            if (endDate) {
                this.viewEl.date.endDate = moment(endDate).format('L')
            }

            console.log(this.viewEl.date);
            return this.viewEl.date;
        } else {
            console.log("modeltoview:startDate");
            var startDate = this.viewEl.$(".from").datepicker("getDate");
            var endDate = this.viewEl.$(".to").datepicker("getDate");
            console.log(startDate);
            console.log(endDate);
            if (value) {
                this.viewEl.date.startDate = value.startDate;
            }
            console.log(this.viewEl.date);
            return this.viewEl.date.startDate;
        }
    },
    endDateConverter: function (direction, value) {
        if (direction === "ViewToModel") {
            console.log("viewtomodel:startDate");
            var startDate = this.viewEl.$(".from").datepicker("getDate");
            var endDate = this.viewEl.$(".to").datepicker("getDate");
            if (startDate && endDate) {
                if (startDate > endDate) {
                    endDate = startDate;
                }
            }
      ...