I have this script which display Gregorian-Hijri date:
var fixd = document.getElementById('date');
function isGregLeapYear(year) {
return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
}
function gregToFixed(year, month, day) {
var a = Math.floor((year - 1) / 4);
var b = Math.floor((year - 1) / 100);
var c = Math.floor((year - 1) / 400);
var d = Math.floor((367 * month - 362) / 12);
if (month <= 2)
e = 0;
else if (month > 2 && isGregLeapYear(year))
e = -1;
else
e = -2;
return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day;
}
function Hijri(year, month, day) {
this.year = year;
this.month = month;
this.day = day;
this.toFixed = hijriToFixed;
this.toString = hijriToString;
}
function hijriToFixed() {
return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 +
Math.floor((3 + 11 * this.year) / 30) + 227015 - 1;
}
function hijriToString() {
var months = new Array("محرم", "صفر", "ربيع الأول", "ربيع الثانى", "جمادى الأولى", "جمادى الثانية", "رجب", "شعبان", "رمضان", "شوال", "ذو القعدة", "ذو الحجة");
return this.day + " " + months[this.month - 1] + " " + this.year;
}
function fixedToHijri(f) {
var i = new Hijri(1100, 1, 1);
i.year = Math.floor((30 * (f - 227015) + 10646) / 10631);
var i2 = new Hijri(i.year, 1, 1);
var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1;
i.month = Math.min(m, 12);
i2.year = i.year;
i2.month = i.month;
i2.day = 1;
i.day = f - i2.toFixed() + 1;
return i;
}
var tod = new Date();
var weekday = new Array("الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت");
var monthname = new Array("يناير", "فبراير", "مارس", "ابريل", "ماي", "جوان", "جويلية", "أوت", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر");
var y = tod.getFullYear();
var m = tod.getMonth();
var d = tod.getDate();
var dow = tod.getDay();
document.write(weekday[dow] + " " + d + " " + monthname[m] + " " + y);
m++;
fixd = gregToFixed(y, m, d);
var h = new Hijri(1421, 11, 28);
h = fixedToHijri(fixd);
document.write(" / " + h.toString() + " ");
<div>
<ul>
<li id="date"></li>
</ul>
</div>
I want to use it in <li> tag
and if it is possible to display the date in two different positions at the same time at the same page
actually I am not familiar with java script so I don't know how to modify this script and then call it by id or whatever in html tag
any help please
This is really an extended comment.
The code can be considerably reduced by using the ca option with either toLocaleString or Intl.DateTimeFormat to set the calendar for formatted dates. It can also be used to set the language, e.g.
let d = new Date();
let options = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
};
console.log(
'Gregorian English: ' + d.toLocaleString('en-u-ca-gergory', options) + '\n' +
'Hijri English : ' + d.toLocaleString('en-u-ca-islamic', options) + '\n' +
'Hijri Arabic : ' + d.toLocaleString('ar-u-ca-islamic', options)
);
You can also use the formatToParts method to get the various parts and order or format them any way you wish.
You can set something like an attribute to any element that needs the date and then assign the innerHTML of that element.
This is all your code except I moved the 'loose' parts into a function that returns the finished date. Then this line
document.querySelectorAll('[display-date]')
.forEach(el => el.innerHTML = getTheDate())
says find all elements with the attribute display-date and insert the results of the date function in them
window.addEventListener('load', () => {
document.querySelectorAll('[display-date]').forEach(el => el.innerHTML = getTheDate())
})
function isGregLeapYear(year) {
return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
}
function gregToFixed(year, month, day) {
var a = Math.floor((year - 1) / 4);
var b = Math.floor((year - 1) / 100);
var c = Math.floor((year - 1) / 400);
var d = Math.floor((367 * month - 362) / 12);
if (month <= 2)
e = 0;
else if (month > 2 && isGregLeapYear(year))
e = -1;
else
e = -2;
return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day;
}
function Hijri(year, month, day) {
this.year = year;
this.month = month;
this.day = day;
this.toFixed = hijriToFixed;
this.toString = hijriToString;
}
function hijriToFixed() {
return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 +
Math.floor((3 + 11 * this.year) / 30) + 227015 - 1;
}
function hijriToString() {
var months = new Array("محرم", "صفر", "ربيع الأول", "ربيع الثانى", "جمادى الأولى", "جمادى الثانية", "رجب", "شعبان", "رمضان", "شوال", "ذو القعدة", "ذو الحجة");
return this.day + " " + months[this.month - 1] + " " + this.year;
}
function fixedToHijri(f) {
var i = new Hijri(1100, 1, 1);
i.year = Math.floor((30 * (f - 227015) + 10646) / 10631);
var i2 = new Hijri(i.year, 1, 1);
var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1;
i.month = Math.min(m, 12);
i2.year = i.year;
i2.month = i.month;
i2.day = 1;
i.day = f - i2.toFixed() + 1;
return i;
}
function getTheDate() {
var tod = new Date();
var weekday = new Array("الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت");
var monthname = new Array("يناير", "فبراير", "مارس", "ابريل", "ماي", "جوان", "جويلية", "أوت", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر");
var y = tod.getFullYear();
var m = tod.getMonth();
var d = tod.getDate();
var dow = tod.getDay();
let d1 = (weekday[dow] + " " + d + " " + monthname[m] + " " + y);
m++;
fixd = gregToFixed(y, m, d);
var h = new Hijri(1421, 11, 28);
h = fixedToHijri(fixd);
let d2 = " / " + h.toString() + " ";
return d1 + d2;
}
<div>
<ul>
<li display-date class="date"></li>
</ul>
</div>
<h3 display-date></h3>
<p>Todays date is <span display-date></span></p>
I've been given some JavaScript that creates a digital clock to go onto a webpage. This is working perfectly, however, I'm trying to amend it to wrap the am/pm suffix (or Diem in this code) in span or bold tags so that I can style it differently to the rest of the time in the CSS.
I'm sure this would be really simple for someone that knows what they're doing but I'm really struggling.
Any help would be appreciated, the JavaScript is below:
function renderTime() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h - 12;
diem="PM";
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + " " + diem;
myClock.innerText = h + ":" + m + " " + diem;
var diem = document.createElement('span');
}
renderTime();
So, I want to do the same thing, but in a URL style, like this: http://example.com/example?h="10"&m="42"
Just concatenate the hour and minute to the URL prefix and return that as a string.
Also, your code produces the wrong diem for times between noon and 12:59, since those should be 12PM.
function getTimeURL() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12;
} else if (h > 12) {
h = h - 12;
diem="PM";
} else {
diem = "PM";
}
if (m < 10) {
m = "0" + m;
}
var url = `http://example.com/example?h=${h}${diem}&m=${m}`;
return url;
}
console.log(getTimeURL());
I added a bunch of comments to your code that'll hopefully make it easier to understand. I also added a global variable that will store your linkText value as it's changed by the function.
// create a global variable that stores our text for the link.
// Your renderTime() function will update it every second.
var linkText = "";
function renderTime() {
//grab the new date
var currentTime = new Date();
//set diem (whatever that means) to "AM"
var diem = "AM";
//get the hours from our current time
var h = currentTime.getHours();
//get the minutes
var m = currentTime.getMinutes();
//get the seconds
var s = currentTime.getSeconds();
//run this function every 1000 milliseconds
setTimeout('renderTime()', 1000);
//if the hour is 0, set it to twelve instead
if (h == 0) {
h = 12;
//else if the hour is any number higher than 12,
//subtract 12 from its value and change diem to "PM"
} else if (h > 12) {
h = h - 12;
diem = "PM";
}
//if the minutes are 0-9 add a 0 before.
if (m < 10) {
m = "0" + m;
}
//if the seconds are 0-9 add a 0 before.
if (s < 10) {
s = "0" + s;
}
//get our clock element
var myClock = document.getElementById('clockDisplay');
//populate our clock element
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
myClock.innerText = h + ":" + m + ":" + s + " " + diem;
//not sure why you're writing over your AM/PM variable at the end here,
//so I commented it out
//var diem = document.createElement('span');
//set our linkText value to be the current hour and minute
linkText = 'http://example.com/example?h="' + h + '"&m="' + m + '"';
}
//run that thang!
renderTime();
<div id="clockDisplay"></div>
First post here. I am trying to create an Easter Calculator for a school project. The function pasCalc(E) works great when called on its own on the browser console. However, when I type a year in my html form, all the dates are off.
Sorry if this sounds like a newb question, but I can't figure out what's wrong... Any help will be greatly appreciated, thank you for your time! :)
function start() {
document.getElementById("orthodox").innerHTML = "Ορθόδοξο πάσχα:";
//var E = document.getElementById("inputfield").value;
//console.log(E);
var pasxa = pasCalc(document.getElementById("inputfield").value)
console.log(pasxa);
//console.log(pasxa[0] + " " + pasxa[1]);
document.getElementById("orthodox").innerHTML += " " + pasxa;
}
function pasCalc(E) {
//var E = 2018;
var a = E % 19;
var T = (8 + 11 * a) % 30;
var month = "Mach";
var K = Math.floor((E / 100) - (E / 400) - 2);
var iPanArx = 21 + (53 - T) % 30;
if (iPanArx > 31) {
var iPanArxM = iPanArx - 31;
month = "April";
} else {
var iPanArxM = iPanArx;
}
var iPanTel = iPanArxM + K;
var Y = (E + Math.floor(E / 4) + iPanArx) % 7;
var iPas = iPanTel + (7 - Y);
if (iPas > 30 && month == "April") {
month = "May";
var iPas = iPas - 30;
} else if (iPas > 31 && month == "Marchυ") {
month = "April";
var iPas = iPas - 31;
}
console.log(iPas + " " + month + " " + E);
var arr = [];
arr.push(iPas);
arr.push(month);
return arr;
}
<div class="container align-center">
<h1>Easter Calculator</h1>
<input id="inputfield" type="text" placeholder="Enter a Year...">
<button class="btn btn-primary" onclick="start();">Submit</button>
<h5 id="orthodox">Orthodox Easter:</h5>
<h5>Catholic Easter:</h5>
</div>
Form fields, by default, are strings. In order for Javascript to know it's an integer so that it works with numeric calculations like the year component of a date, wrap it in a call to parseInt()
var pasxa = pasCalc(parseInt(document.getElementById("inputfield").value))
"2015-06-23 14:00:00"
I tried to format above date time into 12 hour base but stuck in somewhere.
function formatDate(raw_date){
var right = raw_date.substring(10, 0);
var hours = ((right[0].substring(2,0) + 11) % 12 + 1);
var min = raw_date.substring(14,16);
var suffix = right[1] >= 12 ? "PM":"AM";
right[1] = ((right[1] + 11) % 12 + 1) + suffix;
return hours + ':' + min + ' ' + suffix;
}
Can someone help? My desired output is "23/06/2015 02:00 PM"
Try this:
function formatDate(raw_date) {
var right = new Date(raw_date);
var currentHours = right.getHours();
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
if (currentHours > 12) {
currentHours -= 12;
}
return (right.getDate() + '/' + right.getMonth()+ '/' + right.getFullYear() +" "+ currentHours+ ":"+right.getMinutes() + timeOfDay);
}
alert(formatDate("2015-06-23 14:00:00"));
Demo
Solution based on your code:
function formatDate(raw_date){
var year = raw_date.substring(0,4);
var month = raw_date.substring(5,7);
var day = raw_date.substring(8,10);
var right = raw_date.substring(10);
var hours = ((right.substring(0,3))% 12 );
var min = raw_date.substring(14,16);
var suffix = right.substring(0,3) >= 12 ? "PM":"AM";
return day + "/"+month+"/"+year+" "+hours + ':' + min + ' ' + suffix;
}
You should follow a simple flow.
Try to break down the input -> convert them _> and then sum them up:
function formatDate(raw_date){
var right = raw_date.substring(0, 10);
var year=right.substring(0,4);
var month=right.substring(5,7);
var day=right.substring(8,10);
right=day+"/"+month+"/"+year;
var left=raw_date.substring(11, raw_date.length);
var hours = left.substring(0,2);
var suffix = hours >= 12 ? "PM":"AM";
hours=hours-12;
if(hours<10) hours='0'+hours;
var min = left.substring(3,5);
left=hours+":"+min+" "+suffix;
return right + ' ' + left;
}
<script>
function numeri_validator(t) {
var patt = /(\d*)\.{1}(\d{0,2})/;
var donepatt = /^(\d*)\.{1}(\d{2})$/;
var str = t.value;
var result;
if (!str.match(donepatt)) {
result = str.match(patt);
if (result != null) {
t.value = t.value.replace(/[^\d]/gi, '');
str = result[1] + '.' + result[2];
t.value = str;
} else {
if (t.value.match(/[^\d]/gi))
t.value = t.value.replace(/[^\d]/gi, '');
}
}
//get the date
var val1 = document.getElementById("cost" + 1).value;
var val2 = document.getElementById("cost" + 2).value;
//Get date
var date = document.getElementById("Label1").innerText;
//format time
var timeIn = val1.replace('.', ':');
var timeOut = val2.replace('.', ':');
//Concat time with date
var timeinDate = date + " " + timeIn;
var timeoutDate = date + " " + timeOut;
//calculate time difference
var nDifference = Math.abs(new Date(timeoutDate) - new Date(timeinDate));
var one_hours = 1000 * 60 * 60;
var hours = (Math.floor(nDifference / one_hours));
var diff = nDifference % one_hours;
var one_min = 1000 * 60;
var diffmin = Math.round(diff / one_min);
document.getElementById("datelabel").innerText = hours + "." + diffmin;
document.getElementById("total").value = hours + "." + diffmin;
This function calculating the difference between the two times is working fine but is working only in Chrome in other browsers is:
document.getElementById("total").value=NaN:NaN
Please help me.
The issue should be because of this part in your code. .innerText.
var date = document.getElementById("Label1").innerText;
.innerText doesn't work in Mozilla. Use .textContent instead
var date = document.getElementById("Label1").textContent;
I solved this problem by changing the date format. Actually this problem with new Date()
The new Date format should be
new Date('2013/10/19 12:00') // not 2013-10-19
Now is working on all browsers
Thanks