init

2014-10-26 22:10:13 +03:00 · 2014-10-26 22:10:13 +03:00 · f301cb744d
commit f301cb744d
parent 06f61d8ce8
2271 changed files with 103162 additions and 0 deletions
--- a/02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/index.html
+++ b/02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/index.html
@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
+  <script src="dateselector.js"></script>
+</head>
+<body>
+
+<script type="text/template" id="date-selector-template">
+  <select class="year">
+    <% for(var year = yearFrom; year <= yearTo; year++) { %>
+      <option value="<%=year%>"><%=year%></option>
+    <% } %>
+  </select>
+  <select class="month">
+    <% for(var month = 0; month <= 11; month++) { %>
+      <option value="<%=month%>"><%=monthNames[month]%></option>
+    <% } %>
+  </select>
+  <select class="day">
+    <% for(var day = 1; day <= dayTo; day++) { %>
+      <option value="<%=day%>"><%=day%></option>
+    <% } %>
+  </select>
+</script>
+
+<div id="selector-holder"></div>
+<div id="value">тут будет значение даты при выборе</div>
+
+<script>
+  var dateSelector = new DateSelector({ 
+    yearFrom: 2010, 
+    yearTo: 2020, 
+    value: new Date(2012, 2, 31), // 31 марта 2012
+    template: $('#date-selector-template').html().trim()
+  });
+
+  $('#selector-holder').append(dateSelector.getElement());
+
+  $(dateSelector).on("select", function(e) {
+    $('#value').html( e.value + '' );
+  });
+</script>
+
+<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
+
+
+</body>
+</html>