Adding date countdown to jquery counter - javascript

Can someone help me with adding a date counting too to https://github.com/sophilabs/jquery-counter/blob/master/src/jquery.counter.js ?
The current counter is working fine with hour, minute and seconds. Its lacking only date. I am not an expert with it. Please help, thank you

I am not an expert but I think you can use this:
<script language='javascript' type= 'text/javascript>
function showdate()
{
var d = new date();
document.getElementById('date').innerHTML = d.toLocaleDateString();
}
</script>

Related

JavaScript to show <div> after a certain date

I believe this is a relatively simple question (a JavaScript noob here), but I can't seem to find a thread for this particular date function. I am doing website migration for an academic society from a PHP-based site to a drupal CMS. Some of the PHP has obviously broken and I'm trying to replace simple scripts with Javascript. One issue that is giving me a lot of trouble is how to get a text to appear only AFTER a certain date. In PHP my functioning code is:
<?php if (date('YmdH') > 2018011710 ) { ?>
<p class="error">Please note that the deadline for submitting proposals has passed.</p>
<?php } ?>
So I need something in JavaScript to do the same. Here is what I came up with (I apologize in advance for my sloppy code as I'm a beginner with JavaScript):
First CSS to hide the DIV:
<style type="text/css">
.DateDiv { display: none;}
</style>
Then the div itself:
<div class="DateDiv">
<h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>
Finally, my JavaScript, which is not working:
<script>
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
// show only if current date is after January 16, 20018
if (today > 0, 16, 2018) {
$(".DateDiv").show();
}
});
</script>
If anyone could help me sort this out I would be very grateful. If I'm going about this in a manner that is more complicated than it needs to be I'd also appreciate any advice.
Thanks in advance.
PS: I am not asking to compare two dates, but to display a text after a certain date.
you just might want to do something like this:
if (new Date() >= new Date(2018, 0, 16))
months always start at 0 while days start at 1. don't ask why.
this is how the constructor is defined:
new Date(year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]);
just go here for in-depth details about Date()
//show only if current date is after January 16, 20018
var date_to_check_with = new Date("20180116").getTime();
//.getTime() will give time in milliseconds (epoch time)
var current_date = new Date().getTime();
console.log(date_to_check_with < current_date);

Warp.js date starting from previous date

This script using warp.js works great starting from the current date. I can't seem to figure out how to get it to work starting from a previous date like Jan 2nd, 1986?
warp.js
https://github.com/mattbradley/warpjs/blob/master/README.md
Thanks!
<body>
<script src="warp.js"></script>
<div id="container"></div>
<span id="info"></span><br>
<span id="time"></span>
<span id="time2"></span>
<script>
setInterval(function() {
//specify a start date here like Jan 2 1986
Date.warp.speed(3);
var now = new Date;
//new date put out the warped start date above?
var dateD = [now.getMonth() + 1, now.getDate(), now.getFullYear()];
var dateE = [now.getHours(), now.getMinutes(), now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 1000);
</script>
</body>
</html>
I figured this out. You have to use the clock() function so set your custom date, and it will then warp from that custom date.
Date.warp.clock(customDate);

Javascript: Adding days to any date

I've read through a number of topics now and have not found one quite on point.
Here's what I'm trying to do:
1) Parse a bill date that is provided in the format mm/dd/yy and is frequently not today
2) Add a variable number of days to the date. The terms are saved in the dueTime array below. I limited it to 30 days here.
3) Based on the bill date + the payment terms, calculate the date that the bill is due and return that in the mm/dd/yy format.
Here's what I've tried. The information I pass into new Date is what I expect, but the output from new date is never what I expect.
Thanks for your help.
<html>
<head>
<script>
function calculateDueTime(){
var billDate = document.getElementById('billDateId').value;
var key = document.getElementById('termsId').value;
var dueTime = new Array();
dueTime[1] = 30;
var billDate = billDate.split('/');
var newDate = new Date( parseInt( billDate[2] ) + '/' + parseInt( billDate[0] ) + '/' + ( parseInt( billDate[1] ) + parseInt( dueTime[key] ) ) );
document.getElementById('dueDateId').value = newDate.toString();
}
</script>
</head>
<body>
<input name="billDate" id="billDateId" value="5/1/11" />
Or any value in mm/dd/yy or m/d/yy format
<select name="terms" id="termsId" onchange="calculateDueTime()">
<option value="1">Net 30</option>
</select>
<input name="dueDate" id="dueDateId" />
</body>
</html>
Just add the number of days to the date:
var dt= new Date();
dt.setDate(dt.getDate() + 31);
console.log(dt);
I would suggest taking a look at Datejs (http://www.datejs.com/). I use this library quite a bit to deal with dates, which I find to be a real pain in JS.

More than 1 countdown timer on page

I'm trying to add more than one countdown timer with the same date on my page. For some reason the second one doesn't work. I found this countdown code and would see if anyone had a suggestion for me.
JS:
<script language="JavaScript">
TargetDate = "10/31/2011";
BackColor = "none";
ForeColor = "none";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<br><strong><span style='color:red;font-size:20px;' id='phrase1'>%%D%%</span> Days, <span style='color:red;font-size:20px;'>%%H%%</span> Hours, <span style='color:green;font-size:20px;'>%%M%%</span> Minutes & <span style='color:green;font-size:20px;' id='seconds'>%%S%%</span> Seconds Until <span style='color:blue;font-size:22px;'>Halloween</span><span style='color:black;'>!</span></strong>" ;
FinishMessage = "<b><span style='color:red;font-size:22px;'>Happy Halloween</span><span style='color:blue;'>!</span></b>";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js">
I hope someone can help me with this....or can give me a new countdown code
Thanks,
Shawn.
This particular one you cant use twice since all variables etc are in a global scope.

document.getElementById(variable) Help!

I know it can be done but am having issues getting it to work. Basically I want to change the font color of a specific table cell based on a variable which changes daily, in effect highlighting the day of the week in a calendar. I know that a variable can be used to get the element id but what am I missing here? I have tried using a unique DIV inside each cell but get the same error - "Object Required". Thanks in advance.
Here is the code:
<style>
td#day1{color:white;}
td#day2{color:white;}
td#day3{color:white;}
td#day4{color:white;} etc..
<script type="text/javascript">
function calculate_date(){
currentTime = new Date();
day = currentTime.getDate();
return day;
}
function highlight_day() {
calculate_date();
today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
document.onload(highlight_day());
</script>
</head>
<body>
SEPTEMBER
<table class="cal">
<tr>
<td id="day1">1</td><td id="day2">2</td><td id="day3">3</td><td id="day4">4</td>
This function is incorrect:
function highlight_day() {
calculate_date();
today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
The 'day' variable is not set anywhere. You probably wanted this:
function highlight_day() {
var day = calculate_date();
var today = 'day'+ day;
document.getElementById(today).style.color= "red";
}
Change this line:
calculate_date();
to:
var day = calculate_date();
The error you are getting is because 'day' does not exist within the current scope.

Categories