This is my Javascript code to increment in minutes in interval 1
fillMinutes = function () {
var table = widget.find('.timepicker-minutes table'),
currentMinute = viewDate.clone().startOf('h'),
html = [],
row = $('<tr>'),
step = options.stepping === 1 ? 5 : options.stepping;
while (viewDate.isSame(currentMinute, 'h')) {
if (currentMinute.minute() % (step * 4) === 0) {
row = $('<tr>');
html.push(row);
}
row.append('<td data-action="selectMinute" class="minute' + (!isValid(currentMinute, 'm') ? ' disabled' : '') + '">' + currentMinute.format('mm') + '</td>');
currentMinute.add(step, 'm');
}
table.empty().append(html);
}
I want to modify this to increment in 15 minutes interval.
Can someone help me on this.
The option for stepping is what I believe you want, like this:
<script type="text/javascript">
$(function () {
$('#yourTimePickerElement').datetimepicker({
stepping: 15
});
});
</script>
Here is the documentation for stepping:
stepping
Default: 1
Number of minutes the up/down arrow's will move the minutes value in the time picker
Bootstrap 3 Datepicker documentation
incrementMinutes: function () {
var newDate = date.clone().add(15, 'm');
if (isValid(newDate, 'm')) {
setValue(newDate);
}
}
decrementMinutes: function () {
var newDate = date.clone().subtract(15, 'm');
if (isValid(newDate, 'm')) {
setValue(newDate);
}
}
Related
When I click the Start Button it will start to Count Up BUT when I refresh the page or restart the browser it will stop counting and when I click the Start Button again it will continue to count. I want it to click the Start Button just ONCE and start counting up and whenever I refresh the page or restart the browser it will still continue to counting up until I want to Stop it.
Here's my code...
<script>
const pad = (num) => ("0" + num).slice(-2);
$(document).ready(function() {
$("#StartButton").click(function(){
var savedDate = +localStorage.getItem("date"), date = new Date();
console.log(savedDate)
if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);
else date.setHours(0, 0, 0, 0);
var hours = date.getHours(),
minutes = date.getMinutes(),
seconds = date.getSeconds(),
$span = $('#countup');
var timer = setInterval(function() {
var day = date.getDate();
date.setSeconds(date.getSeconds()+1);
if (day != date.getDate()) {
alert("You're logged-in for 24 hours.");
clearInterval(timer);
localStorage.removeItem("date");
}
else {
$span.text(
pad(date.getHours()) + ":" +
pad(date.getMinutes()) + ":" +
pad(date.getSeconds())
);
console.log(date)
localStorage.setItem("date",date.getTime())
}
}, 1000);
});
$("#StopButton").click(function(){
alert("Stop..");
clearInterval(timer);
localStorage.removeItem("date");
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Countup persistently</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span id="countup">00:00:00</span>
<button type="button" id="StartButton">Start</button>
<button type="button" id="StopButton">Stop</button>
</body>
</html>
It will require to rewrite several parts of your code. But the way to do this is to store the state of the counter on the client using for instance window.localStorage.
What you would do is:
* on page load read a flag for localStorage
* if the flag is set start counting
* on click toggle this flag and store it in localStorage
const pad = num => ("0" + num).slice(-2);
const savedDate = localStorage.getItem("date");
let timer;
function start() {
let date = new Date();
console.log(savedDate);
if (savedDate) {
date = new Date(savedDate);
} else {
date.setHours(0, 0, 0, 0);
}
localStorage.setItem("date", date);
let $span = $("#countup");
timer = setInterval(function() {
let day = date.getDate();
date.setSeconds(date.getSeconds() + 1);
if (day !== date.getDate()) {
alert("You're logged-in for 24 hours.");
clearInterval(timer);
localStorage.removeItem("date");
} else {
$span.text(
pad(date.getHours()) +
":" +
pad(date.getMinutes()) +
":" +
pad(date.getSeconds())
);
console.log(date);
localStorage.setItem("date", date);
}
}, 1000);
}
function stop() {
alert("Stop..");
clearInterval(timer);
localStorage.removeItem("date");
}
$(document).ready(function() {
$("#StartButton").click(start);
$("#StopButton").click(stop);
if (savedDate) {
start();
}
});
I'm looking for year calendar with select range functions, but i don't found this. And I decided customize Bootstrap Year Calendar - http://www.bootstrap-year-calendar.com/
And I'm stuck, my customised version is on http://ngrdanjski.com/calendar/
and I'm looking for help!
I added:
All days are disabled by default.
You can added Price periods, in this dates period you have enabled booking.
I want to add option when first click on the day it's first day of booking range, and second click is last day of booking range. Right now when click on day you have enable start date/first day, but when you click second time on day when you want to select end date, it's again start/first date. I wan't to have function to select start and end date. First click on day is start and second is end.
Code for current behavior is:
if(this.options.enableRangeSelection) {
cells.mousedown(function (e) {
if(e.which == 1)
{
var currentDate = _this._getDate($(this));
//console.log(currentDate);
if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
{
_this._mouseDown = true;
_this._rangeStart = _this._rangeEnd = currentDate;
_this._refreshRange();
}
}
});
cells.mouseenter(function (e) {
//console.log(e);
if (_this._mouseDown)
{
var currentDate = _this._getDate($(this));
if(!_this.options.allowOverlap)
{
var newDate = new Date(_this._rangeStart.getTime());
if(newDate < currentDate)
{
var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1);
while(newDate < currentDate)
{
if(_this.getEvents(nextDate).length > 0)
{
break;
}
newDate.setDate(newDate.getDate() + 1);
nextDate.setDate(nextDate.getDate() + 1);
}
}
else
{
var nextDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() - 1);
while(newDate > currentDate)
{
if(_this.getEvents(nextDate).length > 0)
{
break;
}
newDate.setDate(newDate.getDate() - 1);
nextDate.setDate(nextDate.getDate() - 1);
}
}
currentDate = newDate;
}
var oldValue = _this._rangeEnd;
_this._rangeEnd = currentDate;
if (oldValue.getTime() != _this._rangeEnd.getTime())
{
_this._refreshRange();
}
}
});
/* $(window).mouseup(function (e) {
if (_this._mouseDown)
{
_this._mouseDown = false;
_this._refreshRange();
var minDate = _this._rangeStart < _this._rangeEnd ? _this._rangeStart : _this._rangeEnd;
var maxDate = _this._rangeEnd > _this._rangeStart ? _this._rangeEnd : _this._rangeStart;
_this._triggerEvent('selectRange', {
startDate: minDate,
endDate: maxDate,
events: _this.getEventsOnRange(minDate, new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate() + 1))
});
}
}); */
}
URL: https://ngrdanjski.com/calendar/js/bootstrap-year-calendar.js
Full version: https://codepen.io/NGrdanjski/pen/bQGdRb
I don't have skill for this functionality, please help.
Tnx!
I edited your code a bit. I understand that you want to set two dates, the start and the end of the range, and all that happens in two clicks. I also added a check if the second date is after the first one, if it's not they will swap places, so the earlier date is the rangeStart. The dates are stored in rangeStart and rangeEnd:
Edit: here's a pen
cells.mousedown(function (e) {
if(e.which == 1)
{
var currentDate = _this._getDate($(this));
//console.log(currentDate);
if(_this.options.allowOverlap || _this.getEvents(currentDate).length == 0)
{
if(!_this._mouseDown) {
_this._mouseDown = true;
_this._rangeStart = _this._rangeEnd = currentDate;
_this._refreshRange();
}
else {
_this._mouseDown = false;
_this._rangeEnd = currentDate;
if(_this._rangeEnd.getTime() < _this._rangeStart.getTime()) {
var tempDate = _this._rangeEnd;
_this._rangeEnd = _this._rangeStart;
_this._rangeStart = tempDate;
}
// _this._refreshRange();
}
}
if(_this._rangeStart != _this._rangeEnd) {
console.log(_this._rangeStart.getDate() + ',' + _this._rangeEnd.getDate());
}
}
});
I am building a pomodoro clock/countdown, but have an issue with formatting selected time to minutes/hours/seconds. I have tried to multiply the secs variable with 60 (secs*=60), but it makes a mess and I can't figure out how to fix it. So, I would like it to "know" that it needs to count down from 25 minutes - in 25:00 format, or more/less(hh:mm:ss) if the user chooses so with + and - buttons. All help very appreciated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id="num">25 min</h1>
<div id="status"></div>
<button onclick='countDown(secs, "status")'>Start countdown</button>
<button onclick='increaseNumber()'>+</button>
<button onclick='decreaseNumber()'>-</button>
<script src="script.js"></script>
</body>
</html>
and here is javascript:
var num = document.getElementById('num').innerHTML;
var secs = parseInt(num);
function countDown(secs, elem) {
var element = document.getElementById(elem);
secs--;
var timer = setTimeout(function() {
countDown(secs, elem);
}, 1000);
//secs *= 60;
if(secs%60 >= 10){ //10 - if it's not a single digit number
document.getElementById('num').innerHTML = (Math.floor(secs/60) + ":" + secs%60);
}
else{
document.getElementById('num').innerHTML = (Math.floor(secs/60) + ":" + "0" + secs%60);
}
element.innerHTML = "Please wait for "+secs+" minutes";
//if timer goes into negative numbers
if(secs < 1){
clearTimeout(timer);
element.innerHTML = '<h2>Countdown complete!</h2>';
element.innerHTML += 'Click here now';
}
}
function increaseNumber() {
secs += 5;
document.getElementById('num').innerHTML = secs + ' min';
}
function decreaseNumber() {
if(secs >= 10) {
secs -= 5;
document.getElementById('num').innerHTML = secs + ' min';
}
}
Is there a reason you're doing it by hand ?
If you don't mind using a library, moment.js does a very good job at time manipulations. It's lightweight and very easy to use.
If you have to do it by hand because of some limitations, what are they ?
For reference:
//Creates a moment. Its value is the time of creation
var timer = moment();
//add 60 seconds to the timer
timer.add(60, 's');
//Removes 1 minutes from the timer
timer.subtract(1, 'm');
Sources :
Add
Substract
Try this countDown function:
function countDown(secs, elem) {
var element = document.getElementById(elem);
element.innerHTML = "Please wait for "+secs+" minutes";
var second = 0;
var timer = setInterval(function(){
var extraZero = second < 10 ? '0' : '';
document.getElementById('num').innerHTML = secs + ":" + extraZero + second;
if (second-- === 0) {
second = 59;
if (secs-- === 0){
clearInterval(timer);
element.innerHTML = '<h2>Countdown complete!</h2>';
element.innerHTML += 'Click here now';
}
}
}, 1000);
}
Since you are counting down the seconds, it is making more sense to use setInterval instead of setTimeout.
I am dealing with the following puzzle and I cannot understand why it is happening.
I have the following [I believe to be] equivalent pieces of javascript code, but one does not work as expected (notice the Console.Log):
Updates the UI a single time, then unexpectantly stops updating : http://jsfiddle.net/silentwarrior/1m0v6oj1/
jQuery(function () {
var isWorking = true;
if (isWorking) {
var timeEnd = 1431220406000; // generated from php
var timeNow = 1431210557000; // generated from php
var counter = 1;
var t = "";
setInterval(function () {
try {
var c = timeEnd - timeNow - counter;
console.log(c);
var d = new Date(c);
if (c <= 1) {
window.location.href = window.location.href;
return;
}
t = "";
if (d.getHours() > 0) {
t += d.getHours() + "h ";
}
if (d.getMinutes() > 0) {
t += d.getMinutes() + "m ";
}
t += d.getSeconds();
jQuery("#factory_start_prod").val("Working ... " + t + "s left");
counter = counter + 1;
} catch (e) {
}
}, 1000);
}
});
Updates the UI constantly as expected: http://jsfiddle.net/silentwarrior/n3gkum2e/
jQuery(function () {
var isWorking = true;
if (isWorking) {
var timeEnd = 1431220406000;
var timeNow = 1431210557000;
var counter = 1;
var t = "";
setInterval(function () {
try {
var c = timeEnd - Date.now();
console.log(c);
var d = new Date(c);
if (c <= 1) {
window.location.href = window.location.href;
return;
}
t = "";
if (d.getHours() > 0) {
t += d.getHours() + "h ";
}
if (d.getMinutes() > 0) {
t += d.getMinutes() + "m ";
}
t += d.getSeconds();
jQuery("#factory_start_prod").val("Working ... " + t + "s left");
counter = counter + 1;
} catch (e) {
}
}, 1000);
}
});
The only difference from each other is that, the one that works uses Date.now() to get the current timestamp, while the other one uses a pre-built time stamp.
Why would one example update the text in the input correctly while the other wouldn't?
PS: it is important to me to use generated timestamps instead of Date.now() in order to not depend on the users system when calculating the time left.
Your first example is working, however with each iteration you are only subtracting 1 from the timestamp value, which is equivalent to 1ms. Hence the value never appears to change unless you wait a really long time. You need to increment the counter by 1000 on each iteration for a second to be counted:
counter = counter + 1000;
Updated fiddle
I have an html table like that :
time | time_diff
12:01|
12:21|
12:31|
how could I calculate time_diff using Javascript (with or without jQuery) so my table looks like :
time | time_diff
12:01| 20
12:21| 10
12:31|
I'm basically wondering how I can achieve multi lines operations on an html table?
Maybe something like this:
$('table tbody tr').each(function () {
var $row = $(this),
$nextRow = $row.next();
if ($nextRow.length) {
this.cells[1].innerHTML = timeDiff($nextRow.find('td').text(), $row.find('td').text());
}
});
function timeDiff(t1, t2) {
t1 = t1.split(':');
t2 = t2.split(':');
var diff = (t1[0] * 60 + +t1[1]) - (t2[0] * 60 + +t2[1]),
hours = Math.floor(diff / 60),
minutes = (diff - hours * 60) + '';
return hours + ':' + (minutes.length == 1 ? '0' + minutes : minutes);
}
Demo: http://jsfiddle.net/vJNa4/1/
Something like this...
function set(i, val) { sets value of seconds column, row i }
function get(i) {returns time from first column, row i;}
function diff(time1, time2) { returns difference }
last = '';
for(i=0,i<rows;i++){
if(i>0) set(i-1, diff(get(i), last));
last = get(i);
}
Sample implementation:
function set(i, val) {
$('table tr:eq('+(i+1)+' td:eq(2))').text(val);
}
function get(i) {
return $('table tr:eq('+(i+1)+' td:eq(1))').text();
}
function diff(time1, time2) {
var s1 = time1.split(':');
var s2 = time2.split(':');
return s1[0]*60+s1[1] - (s2[0]*60+s2[1]);
}