Actual Date in an HTML Table? - javascript

<tr>
<td class="tr9 td0"><p class="p1 ft8">Mr. / Mrs. : </p></td>
<td class="tr9 td1"><p class="p3 ft8"><nobr>Telefon: </nobr></p></td>
<td class="tr9 td2"><p class="p4 ft6">DATE</p></td>
</tr>
How can I become the actual Date in Javascript on the Placeholder "DATE" in this table?
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
document.write("<b>" + day + "/" + month + "/" + year + "</b>")
Doesnt work.

It's because you are writing value directly to HTML. Pass it to element
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].innerHtml = "<b>" + day + "/" + month + "/" + year + "</b>";
Or if you are using jQuery:
$('.p4').text("<b>" + day + "/" + month + "/" + year + "</b>");
JSFiddle with pure js and jQuery

The javascript code is working fine but the problem with document.write. it write text on entire document.
so use.
document.getElementsByClassName('p4').innerHTML= "<b>" + day + "/" + month + "/" + year + "</b>";

I tried to debug in firebug and it's seems textcontent property still filled by "DATE", so i set the textContent property become date today, code below maybe can answer your question :
<script>
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].textContent = day + "/" + month + "/" + year;
</script>

Related

setInterval is not refresh data every second

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);

Trouble with Javascript Date

I know my attempt it terrible, but this is what I got. I'm trying to get the current date to display in this fashion: Monday, 19 February 2018. Can anyone fix this mess into a working Javascript code?
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById('currentdate").innerHTML = today;
You have syntax error here 'currentdate" either use all "" or '' otherwise your code is working just fine...
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById('currentdate').innerHTML = today;
// Put a ' instead of " ^ here
<div id="currentdate"></div>
The approach I would suggest you here is to still use moment.js
var date = moment().format("dddd, Do MMMM YYYY");
console.log(date);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
var dayname = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname = new Array("January","February","March","April","May","June","July","August","September","October","November", "December");
var d=new Date();
var today = dayname[d.getDay()] + ", " + d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
document.getElementById("currentdate").innerHTML = today;
<span id="currentdate"></span>
document.getElementById('currentdate") this is the problem. you have used one ' and "

JS: Formatting time and date display on website

I have a script that prints the current date and time in JavaScript, but when it prints time, it's missing one 0. Here is the code:
var currentdate = new Date();
var datetime = "0" + currentdate.getDate() + ".0"
+ (currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes();
document.write(datetime);
It should print 04.03.2016 15:04 and prints 04.03.2016 15:4.
Two digit minutes print fine.
Any leads?
Try this
var formatDateDigit = function (i) {
return i <= 9 ? ("0" + i) : i;
};
var currentdate = new Date();
var datetime = formatDateDigit(currentdate.getDate()) + "."
+ formatDateDigit(currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ formatDateDigit(currentdate.getHours()) + ":"
+ formatDateDigit(currentdate.getMinutes());
document.getElementById('my_output_here').innerHTML = datetime;
<div id="my_output_here"></div>

How can I insert a date into a textbox using Javascript?

I'd like to put today's date into a textbox using javascript; Here is my code:
function add_event() {
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var day1 = day + "." + month + "." + year
var html = '<tr><td class="date"><input type="text" name="date_evnt" value="?"></td> <td class="title"><input type="text" value="New Event"></td> <td class="delete"><input type="button" value="-"></td></tr>';
$('#events-table').append(html);
events_table_events();
}
I'm not sure how to set the date into textbox name date_evnt.
If you just want to put the day1 value in date_evnt you can do this:
var html = '<tr><td class="date"><input type="text" name="date_evnt" value="' + day1 + '"></td> <td class="title"><input type="text" value="New Event"></td> <td class="delete"><input type="button" value="-"></td></tr>';
You may try this
function add_event() {
var currentDate = new Date(), day = currentDate.getDate(),
month = currentDate.getMonth() + 1, year = currentDate.getFullYear(),
day1 = day + "." + month + "." + year;
var txt1 = $('<input/>', { 'name':'date_evnt', 'value':day1 }),
tr = $("<tr/>"), td = $('<td/>');
tr.append(td.attr('class','title').html('New Event '))
.append(td.append(txt1))
.append(td.append($('<button/>', {'html':'-'})));
$('#events-table').append(tr);
}
add_event();
DEMO.

Formatting date using jquery datepicker

I apologise if this is a really basic question but I am using the following jquery plugin:
http://jonathanleighton.com/projects/date-input
I want to change the date from YYYY-MM-DD to DD/MM/YYYY using his suggestion under customisations. I tried to do the following which I thought would work but it completely breaks it:
$.extend(DateInput.DEFAULT_OPTS, {
stringToDate: function(string) {
var matches;
if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
return new Date(matches[1], matches[2] - 1, matches[3]);
} else {
return null;
};
},
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return date.dom + "/" + month + "/" + getFullYear();
}
});
It's the following line where it all goes wrong:
return date.dom + "/" + month + "/" + getFullYear();
Could anyone offer a suggestion as to what I'm doing wrong?
You should try using the jQuery UI datepicker. Very easy to format the date
http://jqueryui.com/demos/datepicker/
i don't think you need the "date" in date.dom:
try replacing this:
return date.dom + "/" + month + "/" + getFullYear();
with this:
return dom + "/" + month + "/" + getFullYear();

Categories