added html code for a simple datepicker. shows all dependencies, in their required order, plus highlights week on hover, to emphasise selecting week.

2017-02-04 15:42:46 +00:00 · 2017-02-04 15:42:46 +00:00 · 35cc0c46b1
commit 35cc0c46b1
parent 7596eb7d3f
1 changed files with 65 additions and 0 deletions
--- a/UI/widgets/bootstrap-datepicker.html
+++ b/UI/widgets/bootstrap-datepicker.html
@ -0,0 +1,65 @@
+
+<!DOCTYPE html><html class=''>
+<head>
+<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
+<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css'>
+<style>
+.datepicker tr.highlight { background: #eeeeee; cursor: pointer; }
+</style>
+</head>
+<body>
+<div class="row col-md-12">
+  <div id="datepickermy">
+  </div>
+</div>
+<button class="btn btn-default" onclick="assignHandler()">Assign</button>
+<button onclick="myFunction()">Copy Text</button>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
+<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
+<script src='https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js'>
+</script>
+<script>
+console.log("add mouseenter");
+$(document).on('mouseenter','.datepicker-days tbody tr', function () {
+	//console.log("entered");
+    $(this).addClass('highlight');
+});
+$(document).on('mouseleave','.datepicker-days tbody tr', function () {
+	//console.log("left");
+    $(this).removeClass('highlight');
+});
+$(function () {
+    $('#datepickermy').datepicker({
+		weekStart: 1,
+		maxViewMode: 2,
+		todayBtn: "linked",
+		calendarWeeks: true,
+		todayHighlight: true
+	});
+});
+function assignHandler() {
+    console.log('shall I assign?');
+    var elem = $('#datepickermy')[0];
+    var data = jQuery.hasData(elem) && jQuery._data(elem);
+    if (!data.events.changeDate) {
+        console.log('assigning..');
+        $('#datepickermy').on('changeDate', function (e) {
+            'use strict';
+            var kk = e.date;
+            console.log('1: Iso Week Number: '
+						+ moment(kk).isoWeek() 
+						+ ' of ' 
+						+ moment(kk).weeksInYear());
+        });
+    }
+}
+;
+function myFunction() {
+    console.log('sometext');
+    document.getElementById('field2').value = document.getElementById('field1').value;
+}
+//# sourceURL=pen.js
+</script>
+</body></html>