This is a countdown. How do I reverse this?
Eg.
X days X hours X seconds passed (after).
For example, how do I calculate the time that has passed since the day I was born in this code blog?
I am using this code blog ready. It counts down to the date the website will open. On the contrary, I want to calculate the elapsed time.
var clock = $('#clock');
if (clock.length) {
if (clock.hasClass('js-timer-elapsed')) {
// Elasped timer/countdown
//Put your date
var year = '2012';
var month = '07';
var day = '12';
var time = '00:00:00';
//End Put your date
var date = year + '/' + month + '/' + day + ' ' + time;
var now = new Date();
var dateFormat = 'YYYY/MM/DD hh:mm:ss';
var momentDate = moment(date, dateFormat);
var momentNow = moment(now, dateFormat);
var outputYears = moment(momentNow, dateFormat).diff(momentDate, 'years');
var outputYearsLabel = outputYears > 1 ? 'Years' : 'Year';
var dateCurrentYear = now.getFullYear() + '/' + month + '/' + day + ' ' + time;
var outputDays = moment(dateCurrentYear, dateFormat).diff(momentNow, 'days');
var outputDaysLabel = outputDays > 1 ? 'Days' : 'Day';
var outputMonths = moment(dateCurrentYear, dateFormat).diff(momentNow, 'months');
clock.countdown(date, {
elapse: true,
strftime: dateFormat
}).on('update.countdown', function(event) {
var output = [
'<div class="counter-container">',
'<div class="counter-box first"><div class="number">' + Math.abs(outputYears) + '</div><span>' + outputYearsLabel + '</span></div>', // Years
'<div class="counter-box first"><div class="number">' + Math.abs(outputMonths) + '</div><span>Months</span></div>', // Months
'<div class="counter-box first"><div class="number">' + Math.abs(outputDays) + '</div><span>' + outputDaysLabel + '</span></div>', // Days
'<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>', // Hours
'<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>', // Minutes
'<div class="counter-box last"><div class="number">%S</div><span>Seconds</span></div></div>', // Seconds
'</div>'
].join('\n');
$(this).html(
event.strftime(output)
);
});
} else {
// Default countdown
clock.countdown('2022/10/14 12:00:00').on('update.countdown', function(event) {
var output = [
'<div class="counter-container"><div class="counter-box first"><div class="number">%-D</div><span>Day%!d</span></div>', //Days
'<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>', //Hours
'<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>', //Minutes
'<div class="counter-box last"><div class="number">%S</div><span>Seconds</span></div></div>' //Seconds
].join('\n');
$(this).html(
event.strftime(output)
);
});
}
}
Related
I've looked around and have bits and pieces but can't put the puzzle together. I'm attempting to create a script that will send an email depending on the date. I.E. if a "response" is due on 08/30 it will send a response 2 weeks prior, 1 week prior, and the date of.
Basically I'm looking for the script to capture a range of cells, identify a due date, which will be populated in a column, match it to the current date and send out reminder emails.
The script runs but it will not send me an email.
Here is the code:
function emailAlert() {
// today's date information
var today = new Date();
var todayMonth = today.getMonth() + 1;
var todayDay = today.getDate();
var todayYear = today.getFullYear();
// 1 week from now
var oneWeekFromToday = new Date();
oneWeekFromToday.setDate(oneWeekFromToday.getDate() + 14);
var oneWeekMonth = oneWeekFromToday.getMonth() + 1;
var oneWeekDay = oneWeekFromToday.getDate();
var oneWeekYear = oneWeekFromToday.getFullYear();
// 2 weeks from now
var twoWeeksFromToday = new Date();
twoWeeksFromToday.setDate(twoWeeksFromToday.getDate() + 14);
var twoWeeksMonth = twoWeeksFromToday.getMonth() + 1;
var twoWeeksDay = twoWeeksFromToday.getDate();
var twoWeeksYear = twoWeeksFromToday.getFullYear();
// getting data from spreadsheet
var sheet = SpreadsheetApp.getActiveSheet();
var startRow = 2; // First row of data to process
var numRows = 100; // Number of rows to process
var dataRange = sheet.getRange(startRow, 1, numRows, 999);
var data = dataRange.getValues();
//looping through all of the rows
for (var i = 0; i < data.length; ++i) {
var row = data[i];
var expireDateFormat = Utilities.formatDate(
new Date(row[6]),
'ET',
'MM/dd/yyyy'
);
// email information
var subject = '';
var message =
' A grievance ' +
'\n' +
' Name: ' +
row[0] +
'\n' +
' Grievance ID: ' +
row[2] +
'\n' +
' College: ' +
row[5] +
'\n' +
' Department: ' +
row[6] +
'\n' +
' Article/Policy Violation: ' +
row[7] +
'\n' +
' Status: ' +
row[9] +
'\n' +
' Response Due Date: ' +
expireDateFormat;
//expiration date information
var expireDateMonth = new Date(row[12]).getMonth() + 1;
var expireDateDay = new Date(row[12]).getDate();
var expireDateYear = new Date(row[12]).getFullYear();
//checking for today
if (
expireDateMonth === todayMonth &&
expireDateDay === todayDay &&
expireDateYear === todayYear
) {
var subject =
'A Grievance Is Due Today: ' + row[7] + ' - ' + expireDateFormat;
MailApp.sendEmail('myemail.mail', subject, message);
Logger.log('todayyyy!');
}
//checking for 1 week from now
Logger.log('1 week month, expire month' + oneWeekMonth + expireDateMonth);
if (
expireDateMonth === oneWeekMonth &&
expireDateDay === oneWeekDay &&
expireDateYear === oneWeekYear
) {
var subject =
'A grievance is due in 1 week: ' +
row[7] +
' - ' +
expireDateFormat;
MailApp.sendEmail('myemail.mail', subject, message);
Logger.log('1 week from now');
}
//checking for 2 weeks from now
Logger.log('2 weeks month, expire month' + twoWeeksMonth + expireDateMonth);
if (
expireDateMonth === twoWeeksMonth &&
expireDateDay === twoWeeksDay &&
expireDateYear === twoWeeksYear
) {
var subject =
'A grievance is due in 2 weeks: ' +
row[7] +
' - ' +
expireDateFormat;
MailApp.sendEmail('myemail.mail', subject, message);
Logger.log('2 weeks from now');
}
}
}
I am trying to apply the minimum and maximun for two dates inputs, namely:
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />
<script type="text/javascript">
var proposal_from = document.getElementById("proposal_from");
var proposal_to = document.getElementById("proposal_to");
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function(){
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd;
if(from_dd < 9){
min_to_dd = "0" + from_dd;
} else {
min_to_dd = from_dd;
}
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd;
if(from_dd < 9){
max_to_dd = "0" + from_dd;
} else {
max_to_dd = from_dd;
}
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
console.log(minimum);
console.log(maximum);
proposal_to.min = minimum;
proposal_to.max = maximum;
});
</script>
the event listener seems working now, the minimum and maximun dates get set as the date printed in the console should be and date values are completely correct. Before it was or example if I choose date 2021-10-04 I get minimum 2021-10-5 and 2022-10-5 instead of 2021-10-05 and 2022-10-05, is there anyway to do this with .padStart()?
You have to use the same logic that you used to pad zeros in setFromDate in your change event aswell.
Why this is needed?
You are performing incremental operation on from_dd using from_dd++ this will convert its type from String to Number. So convert it back to string again and perform you number padding logic.
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
console.log(minimum)
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function () {
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd = String(from_dd).padStart(2, '0')
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd = String(from_dd).padStart(2, '0')
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
proposal_to.min = minimum;
proposal_to.max = maximum;
});
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
function dateTimeClock() {
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p id="today"></p>
<p id="day"></p>
<p id="month"></p>
<p id="year"></p>
<p id="date"></p>
<p id="time"></p>
<p id="dateTime"></p>
Can someone please tell why my setInterval is not kicking in ?
I expect my data to refresh every second.
the var for date is defined outside of the interval so it doesn't update. to fix this you'll have to include it in your dateTimeClock function
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
Your time variables are only called once, so their value doesn't change.
Try calling the time variables from within your dateTimeClock function:
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
I am working on a small piece of code that looks to see if a value is equal to 'December 25 - January 9' and if it does increment the year (that I append to it) by one
However I can not figure out how to find that value. Every time I run the script it skips to the else part of the script when that value is selected.
Any guidance is appreciated
if ($('#date').val === 'December 25 - January 9') {
var startDates = $('#date').val().split(" - ");
var year = $('year').val;
var yearDec = parseInt(year, 10) + 1;
var payPdStart = startDates[0] + ' ' + year;
var payPdEnd = startDates[1] + ' ' + yearDec;
var startDate = Date.parse(payPdStart);
myStartDates = new Date(startDate);
var endDate = Date.parse(payPdEnd);
myEndDates = new Date(endDate)
while (myStartDates <= myEndDates) {
var firstCol = "<td style='border:none;'>" + myStartDates + "</td>";
$('#timeTable').append("<tr>" + firstCol + "</td>");
var newDate = myStartDates.setDate(myStartDates.getDate() + 1);
start = new Date(newDate);
}
}
else{
var startDates = $('#date').val().split(" - ");
var year = $('#year').val() ;
var payPdStart = startDates[0] + ' ' + year;
var payPdEnd = startDates[1] + ' ' + year;
var startDate = Date.parse(payPdStart);
myStartDates = new Date(startDate);
var endDate = Date.parse(payPdEnd);
myEndDates = new Date(endDate)
console.log(myStartDates);
console.log(myEndDates);
while (myStartDates <= myEndDates) {
var firstCol = "<td style='border:none;'>" + myStartDates + "</td>";
$('#timeTable').append("<tr>" + firstCol + "</td>");
var newDate = myStartDates.setDate(myStartDates.getDate() + 1);
start = new Date(newDate);
}
Problem is you are using JQuery but chexking value as in javascript
$('#date')[0].value === 'December 25 - January 9'
or
$('#date').val() === 'December 25 - January 9'
should do it.
I see two places where you used val instead of val(), you want to call the function val not access a non-existent val field
if ($('#date').val() === 'December 25 - January 9') { // <-- val()
var startDates = $('#date').val().split(" - ");
var year = $('year').val(); // <-- val()
Try this. It should work.
You have var should be var() also year should be #year
if ($('#date').val() === 'December 25 - January 9') {
var startDates = $('#date').val().split(" - ");
var year = $('#year').val();
var yearDec = parseInt(year, 10) + 1;
var payPdStart = startDates[0] + ' ' + year;
var payPdEnd = startDates[1] + ' ' + yearDec;
var startDate = Date.parse(payPdStart);
console.log(startDates);
console.log(year);
console.log(yearDec);
console.log(payPdStart);
console.log(payPdEnd);
myStartDates = new Date(startDate);
var endDate = Date.parse(payPdEnd);
myEndDates = new Date(endDate)
while (myStartDates <= myEndDates) {
var firstCol = "<td style='border:none;'>" + myStartDates + "</td>";
$('#timeTable').append("<tr>" + firstCol + "</td>");
var newDate = myStartDates.setDate(myStartDates.getDate() + 1);
start = new Date(newDate);
}
}
else{
var startDates = $('#date').val().split(" - ");
var year = $('#year').val() ;
var payPdStart = startDates[0] + ' ' + year;
var payPdEnd = startDates[1] + ' ' + year;
var startDate = Date.parse(payPdStart);
myStartDates = new Date(startDate);
var endDate = Date.parse(payPdEnd);
myEndDates = new Date(endDate)
console.log(myStartDates);
console.log(myEndDates);
while (myStartDates <= myEndDates) {
var firstCol = "<td style='border:none;'>" + myStartDates + " </td>";
$('#timeTable').append("<tr>" + firstCol + "</td>");
var newDate = myStartDates.setDate(myStartDates.getDate() + 1);
start = new Date(newDate);
}
i'm trying to use the gethours() method in javascript but it keeps returning military time. can someone please help me out fixing it so that it displays clock time? (1-12). Thank you so much!
// Reroute from the conf.js script
var chat = $( '.chat-output' ),
message = function ( message, userId ) {
var dt = new Date(),
time = dt.getHours() + ":" + dt.getMinutes(); // + ":" + dt.getSeconds();
return $( '<div class="chat-message color-' + users[userId] + '">' +
'<div class="chat-id color-' + users[userId] + '"></div>' +
'<div class="chat-user-message">' + message + '</div>' +
'<div class="chat-time">' + time + '</div>' +
'</div>' );
},
addText = function ( text ) {
// log.innerHTML += text;
// log.scrollTop = log.scrollHeight;
console.log( text );
},
addRemoteText = function ( userId, text ) {
// addText( '[' + userId + ']: ' + text+'<br>' );
chat.append( message( text, userId ) );
chat.scrollTop( chat.get( 0 ).scrollHeight );
};
function ampm(date){
var dt= date || new Date,
h= dt.getHours(),
m= dt.getMinutes(),
s= dt.getSeconds(),
ampm;
if(h>12){
h-= 12;
ampm= (h%12)? ' PM': ' AM';
}
else ampm= (h%12)? ' AM': ' PM';
m= m<10? '0'+m: m;
s= s<10? '0'+s: s;
return [h, m, s].join(':')+ampm;
}
ampm()
/* returned value: (String)
11:52:55 PM
*/
Something like this?
var dt = new Date();
var hours = dt.getHours();
var ampm = hours > 11 ? 'PM' : 'AM';
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
var time = hours + ":" + dt.getMinutes() + ' ' + ampm;
Fiddle
Here's another version of formatting a time in 12 hour format:
// Returns formatted time for given Date object, or
// current system time if d is falsey.
function getTime(d) {
d = d || new Date();
var hrs = d.getHours();
var pad = function(n){return (n<10?'0':'')+ +n};
return pad(hrs%12 || 12) + ':' + pad(d.getMinutes()) + ' ' + (hrs<12? 'AM':'PM');
}
console.log(getTime(new Date(2014,2,24, 0, 5))); // 12:05 AM
console.log(getTime(new Date(2014,2,24,10,25))); // 10:25 AM
console.log(getTime(new Date(2014,2,24,20,15))); // 08:15 PM
Note that 24hr time is preferred in many cases to avoid anomalies like 12:00 AM (which is really neither AM or PM) and 12:00 AM being before 01:00 AM.