JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<ul id="mainSubMenu" data-bind="foreach: views">
    <li data-bind="css: { selected: isSelected }">
        <a href="#" data-bind="text: name, click: $root.selectedItem"></a>
    </li>
</ul>

<hr/>
<div data-bind="with: selectedItem">
    <div data-bind="template: { name: templateName, data: data }"></div>
</div>

<div id="jsonData2send" data-bind="text: ko.toJSON($root, null, 2)"></div>

<script id="wannTmpl" type="text/html">
    <!-- DATE PICKER -->
<input name="date" data-bind="value: startDate, attr: { min: minStartDate, max: maxStartDate }"  value="" type="date"></input>
<output id=startDate data-bind="text: startDate"></output>
<br />
<input name="date" data-bind="value: endDate, attr: { min: minEndDate, max: maxEndDate }" type="date"></input>
<output id=endDate data-bind="text: endDate"></output>
<small id=diffDate></small>
    
    <!-- TIME PICKER -->    
    Wiederholung: <select data-bind="options: auswahl, value: dropdownAnfrageWannWiederholung"></select>
</script>

<script id="wasTmpl" type="text/html">
    <h2>Art der Leistung</h2>
    ich suche: <select data-bind="options: leAnzahl, value: dropdownAnfrageWasLeAnzahl"></select>
    <select data-bind="options: gesuchteDienstleistungen, value: dropdownAnfrageWasDienstleistungen"></select>
    Im Bereich:<select data-bind="options: choices, value: dropdownAnfrageWasBereich"></select>
 Beschreibung:  <textarea data-bind="value: descriptionOfWork" />
    
     <div>
        Gesucht werden <span data-bind="text: dropdownAnfrageWasLeAnzahl"></span> <span data-bind="text: dropdownAnfrageWasDienstleistungen"></span> fuer den Bereich <span data-bind="text: dropdownAnfrageWasBereich"></span>
    </div>   
    <div id="achtungBehoerde" style="display:none">
        <p>Achtung! Die Erstellung von Anfragen für Behördentermine ist kostenpflichtig....

CSS

.selected a{ color: red; }

li{
    list-style-type: none;
    display:inline;
    margin:0 20px 20px 0;
}

JavaScript

var Submenu = function(name,templateName,data, parent) {
   this.name = ko.observable(name); 
   this.templateName = templateName;
   this.data = data; 
   this.isSelected = ko.computed(function() {
       return this === parent.selectedItem();        
   }, this);
};
/*
Submenu.prototype.toJSON = function() {
    var copy = ko.toJS(this); //easy way to get a clean copy
    delete copy.full; //remove an extra property
    return copy; //return the copy to be serialized
}*/
 
//======WANN========================
auswahl = ["Nie", "Täglich", "Wöchentlich"];
 
//---------------------------------//
var subModelA = {
    dropdownAnfrageWannWiederholung : ko.observable("Nie"),
        //reset startDate, min, max and EndDate  
    startDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    minStartDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    maxStartDate: ko.observable(moment().add({days:600,months:0}).format("YYYY-MM-DD")),
    endDate: ko.observable(moment().add({days:0,months:0}).format("YYYY-MM-DD")),
    minEndDate: ko.observable(moment().add({days:1,months:0}).format("YYYY-MM-DD")),
    maxEndDate: ko.observable(moment().add({days:365,months:0}).format("YYYY-MM-DD"))
};
//=======WAS========================= 
leAnzahl = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
gesuchteDienstleistungen = ["Schriftdolmetscher", "Kommunikationsassistenten", "Taubendolmetscher", "Gebaerdensprachdolmetscher"];
choices = ["Arbeit", "Arzt", "behoerde", "Bildung", "Freizeit", "Gericht", "Sonstiges"];
 

//---------------------------------//
var subModelB = {
    descriptionOfWork: ko.observable(""),
    dropdownAnfrageWasLeAnzahl : ko.observable("1"),
    dropdownAnfrageWasDienstleistungen : ko.observable("Gebaerdensprachdolmetscher"),
    dropdownAnfrageWasBereich : ko.observable("Sonstiges")
};
//========WO=========================
var subModelC = {
    institution: ko.observable(""),
    street: ko.observable(""),
    streetNumber:...