Add jqui-datepicker example

Author: Gaurav0

app/controllers/application.js

@@ -1,13 +1,4 @@
 import Ember from 'ember';
 
 export default Ember.ObjectController.extend({
-    count: 0,
-    text: function() {
-        return "Clicked " + this.get('count') + " times.";
-    }.property('count'),
-    actions: {
-        changeText: function() {
-            this.incrementProperty('count');
-        }
-    }
 });

app/controllers/button.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.ObjectController.extend({
+    count: 0,
+    text: function() {
+        return "Clicked " + this.get('count') + " times.";
+    }.property('count'),
+    actions: {
+        changeText: function() {
+            this.incrementProperty('count');
+        }
+    }
+});

app/router.js

@@ -2,10 +2,12 @@ import Ember from 'ember';
 import config from './config/environment';
 
 var Router = Ember.Router.extend({
-  location: config.locationType
+    location: config.locationType
 });
 
 Router.map(function() {
+    this.route('button');
+    this.route('datepicker');
 });
 
 export default Router;

app/styles/app.css

@@ -1,3 +1,18 @@
 html, body {
-  margin: 20px;
+    margin: 20px;
+}
+
+nav {
+    margin: 20px 0;
+}
+
+nav li {
+    display: inline-block;
+    border-left: 1px solid #ccc;
+    margin: 0;
+    padding: 4px 10px;
+}
+
+nav li:first-of-type {
+    border-left-color: transparent;
 }

app/templates/application.hbs

@@ -1 +1,6 @@
-{{#jqui-button icon="ui-icon-gear" action="changeText"}}Click me{{/jqui-button}} {{text}}
+<nav>
+    <li>{{#link-to "button"}}Button{{/link-to}}</li>
+    <li>{{#link-to "datepicker"}}Datepicker{{/link-to}}</li>
+</nav>
+
+{{outlet}}

app/templates/button.hbs

@@ -0,0 +1,3 @@
+<h2>Button</h2>
+
+{{#jqui-button icon="ui-icon-gear" action="changeText"}}Click me{{/jqui-button}} {{text}}

app/templates/datepicker.hbs

@@ -0,0 +1,2 @@
+<h2>Datepicker</h2>
+{{jqui-datepicker value=date2 yearRange="2013:2015"}} {{date2}}