using javascript in html to display current date

Question

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

You can't use the same ID multiple times in the same document. You could use a class or an attribute. — user15388024
– user15388024, Commented Jun 29, 2021 at 7:26

RobG · Accepted Answer · 2021-06-29 11:33:37Z

1

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.

edited Jun 29, 2021 at 11:33

answered Jun 29, 2021 at 11:27

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohsen Alyafei Over a year ago

This is a simple method indeed. It is all in there in Javascript.

Mohsen Alyafei Over a year ago

Voting your answer up. 👍

Kinglish · Accepted Answer · 2021-06-29 09:29:07Z

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>

thanks alot .. it works well but show me only Gregorian date .. i want both Gregorian and Hijri date
@TahaniAl-abri ok. together? one on top of the other? or side by side? or do you want to be able to decide which on a per-element basis?

Collectives™ on Stack Overflow

using javascript in html to display current date

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related