This question already has answers here:
jQuery - Change 1-24 hour to 1-12 hour using .getHours() method?
(2 answers)
Closed 9 years ago.
I want to change my hours into 12hrs not 24hrs.
this is my code :
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
var seconds = new Date().getSeconds();
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
var minutes = new Date().getMinutes();
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
var hours = new Date().getHours();
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
You are looking for this
newHours = (oldHours) % 12
if (newHours == 0) {
newHours = 12;
}
Related
<!DOCTYPE>
<html>
<head>
<script>
function displayDate() {
var date = new Date();
const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const dayArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var Date = date.getDate();
var month = monthArray[date.getMonth()];
var year = date.getFullYear();
var day = dayArray[date.getDay()];
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var amPm = "AM";
if (hours < 10) {
hours = "0" + hours;
}
if (date.getHours() > 12) {
amPm = "PM";
}
var str = Date + " " + month + " " + year + " " + day + " " + hours + ":" + minutes + " " + amPm;
document.getElementById("date1").value = str;
}
</script>
</head>
<body>
Current date: <input id="date1" type="text" size="30" onload="displayDate()">
</body>
</html>
Hi guys, I am trying to display the current date in the textbox. However, I can't seem to get it to work. When the program ran, the textbox did not display anything. I tried using a console.log function to print the output in the console but it didn't seem to work as well. Kindly advise for a solution, thank you.
You can remove the onload() and simply call your function when the window loads.
Something like that:
document.addEventListener("DOMContentLoaded", function() {
displayDate();
});
However, your code has a problem you should be aware of. You cannot name a variable with the name "Date" because this causes conflict with Global function Date(). Instead, rename your variable somehow else. I will include my code to show you what I mean.
<!DOCTYPE>
<html>
<head>
</head>
<body>
Current date: <input id="date1" type="text" size="30">
</body>
<script>
function displayDate() {
console.log("hey!");
let date = new Date();
const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const dayArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var theDate = date.getDate();
var month = monthArray[date.getMonth()];
var year = date.getFullYear();
var day = dayArray[date.getDay()];
var hours = date.getHours() % 12;
var minutes = date.getMinutes();
var amPm = "AM";
if (hours < 10) {
hours = "0" + hours;
}
if (date.getHours() > 12) {
amPm = "PM";
}
var str = theDate + " " + month + " " + year + " " + day + " " + hours + ":" + minutes + " " + amPm;
document.getElementById("date1").value = str;
}
document.addEventListener("DOMContentLoaded", function() {
displayDate();
});
</script>
</html>
My js project is working fine but I need to exclude Saturdays and Sunday in it, or even holiday. Can you please check on my code on how can I achieve this.
<p>Meet me at <span id="thedate"></span></p>
<script>
var m_names = ["January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December"
];
var d_names = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"
];
var myDate = new Date();
myDate.setDate(myDate.getDate() + 7);
var curr_date = myDate.getDate();
var curr_month = myDate.getMonth();
var curr_day = myDate.getDay();
document.getElementById("thedate").innerHTML = (d_names[curr_day]
+ "," + m_names[curr_month] + " " + curr_date);
</script>
You could easily find out if the day is not between monday - friday by:
// Sunday - Saturday : 0 - 6
if (curr_day < 1 || curr_day > 5) {
// do something, maybe set it to monday?
curr_day = 1
}
my question is about i am using below code for date and time in 24 hours format, but here i need to change the format to 12 hours.
please help me solve the issue.
$(document).ready(function() {
// Making 2 variable month and day
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
// make single object
var newDate = new Date();
// make current time
newDate.setDate(newDate.getDate());
// setting date and time
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>
use ("0"+hours%12).slice(-2) to do two digits 12 hours format and use (hours/12 == 0) to get AM/PM:
$(document).ready(function() {
// Making 2 variable month and day
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
// make single object
var newDate = new Date();
// make current time
newDate.setDate(newDate.getDate());
// setting date and time
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(("0"+hours%12).slice(-2) + " " + ((hours/12 == 0)?"AM":"PM"));
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>
use this method.
function ampmFormat(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
Then you can add day , month and year with this.
Add the following code after assigning current hour to hours var.
var timing = hours >= 12 ? 'PM' : 'AM';
hours %= 12;
if(hours == 0)
hours = 12;
$("#ampm").html(timing);
Add this line to html
<li id="ampm"></li>
Updated code -
$(document).ready(function() {
// Making 2 variable month and day
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
// make single object
var newDate = new Date();
// make current time
newDate.setDate(newDate.getDate());
// setting date and time
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
var timing = hours >= 12 ? 'PM' : 'AM';
hours %= 12;
if(hours == 0)
hours = 12;
$("#ampm").html(timing);
// Add a leading zero to the hours value
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
<li id="ampm"></li>
</ul>
</div>
You can do that manually.
If ( hours > 12){
hours = hours % 12;
}
else{
hours = hours;
}
You can also add a String to go with,
var ampm = am;
If ( hours > 12){
hours = hours % 12;
ampm = pm;
}
else{
hours = hours;
ampm = am;
}
Or a boolean or whatever....
I hope, it's useful
I have the following code that I am using to display the current date and time, and I want it always updated so I have a setInterval to update it every second. This seems to be causing the page to be taking up 25% of the CPU and the memory it takes up just keeps climbing the longer the page is up.
Is there anything I can do to improve the performance of this?
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setInterval(update_time, 1000);
})();
});
Use setTimeout instead of setInterval.
The comments above have done a good job explaining why, but I'll reiterate.
Your current function will schedule a new setInterval every time it is called, on top of any existing ones. After just 5 seconds you'll have 32 intervals running. Every second this number doubles.
setTimeout executes its callback function once after a set amount of time. So after one second the timeout will fire and expire, the function will execute, and a new timeout will be created. Rinse and repeat.
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setTimeout(update_time, 1000);
})();
});
Basically I want to have a live clock, one that updates every second! I've looked around and couldn't find something that has worked. Here is what I have tried:
function doDate()
{
var str = "";
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
str += "Today is: " + days[now.getDay()] + ", " + now.getDate() + " " + months[now.getMonth()] + " " + now.getFullYear();
var updateTime = function() { setTimeout("doDate()", 1000); }
document.getElementById("todaysDate").innerHTML = str;
}
This does not seem to work! I presume there is something I have done right in here?
Please modify your code as follow:-
function doDate()
{
var str = "";
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
str += "Today is: " + days[now.getDay()] + ", " + now.getDate() + " " + months[now.getMonth()] + " " + now.getFullYear() + " " + now.getHours() +":" + now.getMinutes() + ":" + now.getSeconds();
document.getElementById("todaysDate").innerHTML = str;
}
setInterval(doDate, 1000);
<div id="todaysDate"></div>
This line of code has no effect:
var updateTime = function() { setTimeout("doDate()", 1000); }
You define function variable updateTime which make postponed invocation of doDate, but this variable is unused in your code.
Instead of this you have to call setTimeout immediately without wrapping it with function:
setTimeout(doDate, 1000);
following code might help you
function doDate()
{
var str = "";
var now = new Date();
str = now.toDateString() +' '+now.toLocaleTimeString() ;
document.getElementById("todaysDate").innerHTML = str;
}
setInterval(doDate, 1000);
Your setTimeout call is incorrect:
var updateTime = function() { setTimeout("doDate()", 1000); }
Should rather look like:
setTimeout(doDate, 1000);
When adding a callback, you should not call the function (and in this case, you should not add it as a string), add the function itself.
And the function you wrap it inside of is not needed, just call the setTimeout function right away.
function doDate() {
let currentDate = document.getElementById('currentDate');
let current = new Date();
currentDate.innerHTML = `Current Date and Time : <b>${current}</b> `;
}
setInterval(doDate, 1000);
<div id="currentDate"></div>