I'm attempting to generate a calender using JavaScript, when i click my "Volgende" button to go to the next month my buttons get overwritten. Does anyone know how to fix this?
The HTML:
<body>
<button id="Vorige">Vorige</button> <button id="Volgende" onclick="VolgendeFunc()">Volgende</button>
<br>
<div id="div">
<script type="text/javascript" src="Kal.js"> </script>
</div>
</body>
</html>
And here the js:
var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var today = new Date();
var dag = today.getDay();
var myMonth = today.getMonth();
var jaar = today.getFullYear();
function VolgendeFunc(){
myMonth = myMonth + 1;
Kalender();
}
function Kalender(){
document.write(monthNames[myMonth] + jaar + "<br>");
for (var i=1; i <= monthLength[myMonth]; i++){
document.write("<a href='#'>" + i + "</a> ");
if ( i == 7){
document.write ("<br>");
}
if ( i == 14){
document.write ("<br>");
}
if ( i == 21){
document.write ("<br>");
}
if ( i == 28){
document.write ("<br>");
}
}
}
window.onload=Kalender();
document.write immediately replaces any HTML you might have in the page.
Instead add something like a tempt var and then push HTML to that.
In a moment, I will add a jsfiddle here to show you.
Your code has some other issues...but this gets you past the first issue.
UPDATED EXAMPLE
var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var today = new Date();
var dag = today.getDay();
var myMonth = today.getMonth();
var jaar = today.getFullYear();
var VolgendeFunc = function(){
myMonth = myMonth + 1;
Kalender();
}
var BackFunc = function(){
myMonth = myMonth -1;
Kalender();
}
function Kalender(){
var myHTML ='';
myHTML+=monthNames[myMonth] + jaar + "<br>";
for (var i=1; i <= monthLength[myMonth]; i++)
{
myHTML+="<a href='#'>" + i + "</a> ";
if (i%7 == 0) { myHTML += "<br>"; } //Save you some lines (best practice)
}
document.getElementById('div').innerHTML = myHTML;
}
document.addEventListener("DOMContentLoaded", Kalender, false);
Related
Scenario is:
I have a displayed full live datetime in javascript including name of the day.
However that format consumes too much space when the viewport is being resized so my solution is to
change the format (make it shorter) if the screen size is smaller.
It goes like this:
When the user has a very wide screen I'd like to provide her/him the full datetime and day like this:
"23:34:39 - October 3, 2019 - Thursday"
When the user is using a tablet format should be:
"23:34:39 - Oct 3, 2019 - Thu"
And when the user is on mobile or older phones which has a very small screen, the format should be:
"23:34:39 - 2019-10-03 - Thu" of if the code detects even smaller screen I will remove the seconds.
I have found several threads here about rezise(function()); here and addEventListener here also another one here so I have done some modification in my code but I can't seem to make it work, there is no display at all after I added the addEventListener.
here is my jsclock.js
window.addEventListener("resize", function() {
if (window.matchMedia("(min-width: 1000px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ '+months[month]+' '+d+', ' +year+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
} else if (window.matchMedia("(min-width: 800px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
d = date.getDate();
day = date.getDay();
days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ '+months[month]+' '+d+', ' +year+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
} else (window.matchMedia("(min-width: 200px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
d = date.getDate();
if(d<10)
{
d = "0"+d;
}
day = date.getDay();
days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ ' +year+'-'+months[month]+'-'+d+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
}
and how I'm displaying it.
span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>
Generate the HTML for all the timestamps:
<span class="size-l date-time">nice and long datetimestamp<span>
<span class="size-m date-time">shorter datetimestamp<span>
<span class="size-s date-time">shortstamp</span>
and then hide them by default using CSS, with media queries that unhide whichever needs to be unhidden. There is no reason to use JS here at all:
.date-time { display: none; }
#media screen and (min-width: 300px) {
.size-s .date-time { display: inline-block; }
}
#media screen and (min-width: 576px) {
.size-m .date-time { display: inline-block; }
}
#media screen and (min-width: 800px) {
.size-l .date-time { display: inline-block; }
}
i want to get the current time in May 09, 2019 format.
var d = new Date();
var delay = 500;
var month = d.getMonth()+1;
var day = d.getDate();
var y=d.getFullYear();
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
here the output shows the current time in 2019/05/09 format.how should i get "May 05, 2019" format.
Try this
var d = new Date();
var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var month = months[d.getMonth()]
var day = d.getDate();
var y=d.getFullYear();
var today = month +" " +day + "," + y;
console.log(today);
Instead of creating (and maintain) your own array of names you can use the following:
d.toLocaleString('en-us', { month: 'long' });
var d = new Date();
var month = d.toLocaleString('en-us', { month: 'long' });
var day = d.getDate();
var y=d.getFullYear();
var today = month +" " +day + "," + y;
console.log(today);
You can do this,
var monthNames = [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct",
"Nov", "Dec"
];
var d = new Date();
var day = d.getDate();
var monthIndex = d.getMonth();
var year = d.getFullYear();
var output = monthNames[monthIndex] + ' 'day + ' ,' + year;
This is exactly what you are looking for
function LogCurrentDate(e){
var date = new Date();
var options = { year: 'numeric', month: 'long', day: '2-digit' };
$(".output").empty().append("<p>" + date.toLocaleDateString('en-US', options) + "</p>");
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button onclick="LogCurrentDate(event)">Show Date</button>
</div>
<div class="output"></div>
I apologize as I'm sure this question has been answered already but there's so many different solutions from different years that my head is just spinning from viewing all the different solutions. But can someone please help with providing a straight forward javascript solution to display (x) days after current date?
All I'm trying to accomplish is having a notice on a page - "We are currently accepting bookings for March XX, 2017 or after" at the top.
OR is there anything I can to the code below to make it add (X) days as I'm using this to show current date.
var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
function showTime() {
function twoDigit(n) {
return ('0' + n).slice(-2);
}
function iso8601(date) {
return date.getFullYear() +
'-' + twoDigit(1 + date.getMonth()) +
'-' + twoDigit(date.getDate()) +
'T' + twoDigit(date.getHours()) +
':' + twoDigit(date.getMinutes());
}
function en_US(date) {
var h = date.getHours() % 12;
return MONTH_NAME[date.getMonth()] +
' ' + date.getDate() +
', ' + date.getFullYear();
}
var timeEl = document.getElementById('time');
if (timeEl !== null) {
var now = new Date();
timeEl.innerHTML = en_US(now);
timeDiv.setAttribute('datetime', iso8601(now));
}
};
setInterval(showTime, 1000);
Please and thank you.
You can use setDate and getDate methods to solve your problem. Take a look at addDays method I have written. Hope this helps.
var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
function showTime() {
function twoDigit(n) {
return ('0' + n).slice(-2);
}
function iso8601(date) {
return date.getFullYear() +
'-' + twoDigit(1 + date.getMonth()) +
'-' + twoDigit(date.getDate()) +
'T' + twoDigit(date.getHours()) +
':' + twoDigit(date.getMinutes());
}
function en_US(date) {
var h = date.getHours() % 12;
return MONTH_NAME[date.getMonth()] +
' ' + date.getDate() +
', ' + date.getFullYear();
}
function addDays(date, days){
var newDate = new Date(date.getTime());
newDate.setDate(newDate.getDate() + days);
return newDate;
}
var timeEl = document.getElementById('time');
if (timeEl !== null) {
var now = new Date();
timeEl.innerHTML = en_US(now) + ' to ' + en_US(addDays(now, 15));
timeEl.setAttribute('datetime', iso8601(now));
}
};
setInterval(showTime, 1000);
<div id="time"></div>
I want to convert date from this format "yyyy-MM-dd'T'HH:mm:ss.SSS"
to Mon, May 09 2016 08:12:29 using JavaScript, below code is not working. pls advice
var str2 = "2016-05-09T08:12:29.110";
var date2 = Date.parse( str2 );
alert( date2.toString( 'EEE, MMM d yyyy HH:mm:ss' ) );`
Try this:
var str2 = "2016-05-09T08:12:29.110";
var date2 = new Date(Date.parse(str2));
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
function pad(n, number) {
var str = number.toString();
var result = '';
for (var i=0; i<n-str.length; ++i) {
result += '0';
}
return result + str;
}
document.body.innerHTML = days[date2.getDay()] + ', ' + months[date2.getMonth()] + ' ' + pad(2, date2.getDate()) + ' ' + date2.getFullYear() + ' ' + pad(2, date2.getUTCHours()) + ':' + pad(2, date2.getMinutes()) + ':' + pad(2, date2.getSeconds());
Try this
var str2 = "2016-05-09T08:12:29.110";
var date2 =new Date(str2);
alert( date2 );
This question already has answers here:
How to initialize a JavaScript Date to a particular time zone
(20 answers)
Closed 9 years ago.
This is simple current time zone clock so i want specific time zone like INDIA if any person open my site in US or any Out of India, that people can see INDIAN Time not US time.
So Please Can any one help to add specific time zone in this code.
function date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
//months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
//days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+d+' '+months[month]+' '+year+' - '+days[day]+' - '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
You may use this js timezone-js
for further reference you may refer this Question