// create a timer to use on each 30 minute time elapse (from here: https://stackoverflow.com/a/20618517/125981 )
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
// dynamically add the select values
function generateSelects(step, element) {
var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
// empty out the select options
while (element.firstChild) {
element.firstChild.remove();
}
var firstoption = document.createElement("option");
firstoption.innerText = "Select Time";
firstoption.value = "Select Time";
element.appendChild(firstoption);
while (dt.getDate() == 1) {
let point = dt.toLocaleTimeString('en-US');
let pointValue = dt.getTime();
let item = document.createElement("option");
item.value = pointValue;
item.innerText = point;
element.appendChild(item);
// increment for next step
dt.setMinutes(dt.getMinutes() + step);
}
}
window.onload = function() {
generateSelects(checkperiod, document.getElementById("timeselect"));
sel.dispatchEvent(timesup);
//console.clear();
// var minutes = checkperiod;
// var seconds = minutes * 60;
//var desiredBoundryMintues = checkperiod;
var mytimer = startTimer(details);
};
function secondsToNext(intervalminutes) {
var current = new Date();
var min = current.getMinutes();
min = min > intervalminutes ? min - intervalminutes : min;
// min to next interval
min = (60 - (min + intervalminutes));
// seconds to next interval
var seconds = min * 60;
// minutes to next (in seconds) less current seconds in the minute get total seconds to next interval
seconds = seconds + (60 - current.getSeconds());
return seconds;
}
function startTimer(p) {
//console.log(p);
var display = document.querySelector('#timerdisplay');
var s = secondsToNext(p.detail.period);
var timer = new CountDownTimer(s);
// to test: var timer = new CountDownTimer(6);
timer.onTick(format).onTick(restart).start();
//allows us to restart time at defined (30) interval minute mark
function restart() {
if (this.expired()) {
mydate.dispatchEvent(timesup);
this.duration = (p.detail.period * 60) - 1;
this.duration = secondsToNext(p.detail.period);
setTimeout(function() {
timer.start();
}, 1000);
}
}
function format(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
// show progress on each tick
display.textContent = minutes + ':' + seconds;
}
};
// check if is valid date
// credit here: https://stackoverflow.com/a/1353711/125981
function isDate(d) {
if (Object.prototype.toString.call(d) === "[object Date]") {
// it is a date
if (isNaN(d.getTime())) { // d.valueOf() could also work
// date is not valid
return false;
} else {
// date is valid
return true;
}
} else {
// not a date
return false;
}
}
// parse a date in mm/dd/yyyy format
function parseDate(input) {
// assume / or - for delimiters
var parts = input.indexOf("/") !== -1 ? input.split('/') : input.split('-');
return new Date(parts[2], parts[0] - 1, parts[1]); // Note: months are 0-based
}
function checkSelectOptions(e) {
//console.dir(e);
var today = new Date();
var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
dt.setHours(today.getHours() + e.detail.hour);
var nowtime = dt.getTime();
var myOpts = e.target.getElementsByTagName("option");
for (var i = 0; i < myOpts.length; i++) {
myOpts[i].disabled = (myOpts[i].value <= nowtime);
}
}
function checkSelect(e) {
var dt = new Date(1970, 0, 1, 0, 0, 0, 0);
dt.setTime(e.target.value);
document.getElementById("showtime").innerHTML = dt.toLocaleTimeString('en-US');
}
function checkDate(e) {
var d = parseDate(e.target.value);
var isValidDate = isDate(d);
document.getElementById("showdate").innerHTML = isValidDate ? d.toLocaleDateString('en-US') : "Invalid Date entered";
}
// horrid global variables
var checkperiod = 30; //minute boundary
var boundaryHour = 4;
// create event
//var timesup = new Event('timesup');
var details = {detail:{"period":checkperiod,"hour":boundaryHour }};
var timesup = new CustomEvent('timesup', details);
///var timesup = document.createEvent('Event');
// Define event named 'timesup'.
///timesup.initEvent('timesup', true, true);
var mydate = document.getElementById("put_date");
mydate.addEventListener('change', checkDate);
var sel = document.getElementById("timeselect");
sel.addEventListener('change', checkSelect, false);
sel.addEventListener('timesup', checkSelectOptions, false);
option:disabled {
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div>
<input type="date" name="Date" id="put_date" required>
<select name="timeselect" id="timeselect">
<option value="Select Time">Select Time</option>
</select>
<div>Next selection window closes in <span id="timerdisplay"></span> minutes!</div>
<div>You chose: <span id="showtime">no time yet</span></div>
<div>You chose Date: <span id="showdate">no date yet</span></div>
