Chris/FlexitimeTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chris.watts90@outlook.com 2017-02-04 15:42:46 +00:00
parent 7596eb7d3f
commit 35cc0c46b1
1 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
UI/widgets/bootstrap-datepicker.html Normal file
View File

@ -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>