English translation by ChatGPT

Ahmed Zayed 4/2/1/1 أساسيات الجافاسكريبت 'التعامل مع التاريخ و الوقت'

Course

دورة تدريبية

4/2/1/1 أساسيات الجافاسكريبت 'التعامل مع التاريخ و الوقت'

تطوير المواقع الإلكترونية MEAN-Stack from A to Z التأسيس Level1

يعتبر التاريخ date من نوع البيانات object و هي من الـ non-primitive data types و سنتناول لاحقا الفرق بين الـ non-primitive data type و الـ primitive data types لذلك وجب التنويه ان تناول التعامل مع التاريخ في هذا المواضع ليس لسبب تشابه التاريخ مع الأرقام و البيانات النصية من حيث النوع و لكن لسبب أخر و هو شيوع استخدام التعامل مع الأرقام و النصوص و التواريخ كونها تمثل أغلب البيانات التي نتعامل معها بشكل يومي

التعامل مع الوقت و التاريخ أيضا من الأشياء التي يقوم كل مبرمج بالتعامل معها بشكل دوري و لذلك يجب علينا أن نتعرف علي الـ methods و الـ properties الخاصة بالوقت و التاريخ
- الحصول علي تاريخ اليوم

Code


  let myTime = new Date();
  console.log(myTime) //2023-09-23T01:57:57.515Z

في الكود السابق قمنا بعمل instance للـ object المسمي Date للحصول علي الوقت و التاريخ الحاليان و تقوم JS بكتابتها بالشكل التالي
2023-09-23T01:57:57.515Z
التاريخ ثم حرف T و من بعده الوقت بالساعات و الدقائق و الثواني و الميللي ثانية -طرق تحويل التاريخ في الـ JS يمكننا النظر للكود التالي

Code


  let myTime = new Date();
  console.log(myTime.toISOString()) //2023-09-23T02:08:51.992Z

يمثل حرف الـ z الـ timezome

Code


  console.log(myTime.toDateString())//Fri Sep 22 2023
  console.log(myTime.toJSON())//2023-09-23T02:10:32.786Z
  console.log(myTime.toLocaleDateString())//9/22/2023
  console.log(myTime.toLocaleString())//9/22/2023, 7:11:56 PM

الوقت و التاريخ بالتوقيت المحلي (لو تم استدعاء هذه الـ method في المتصفح يمثل توقيت المستخدم و في حالة إستخدامه في الـ node js يمثل توقيت السيرفر)

Code


  console.log(myTime.toLocaleTimeString())//7:12:44 PM الوقت بالتوقيت المحلي
  console.log(myTime.toString())//Fri Sep 22 2023 19:13:35 GMT-0700 (Pacific Daylight Time)
  console.log(myTime.toTimeString())//19:14:24 GMT-0700 (Pacific Daylight Time) الوقت بالتوقيت المحلي
  console.log(myTime.toUTCString())//Sat, 23 Sep 2023 02:15:43 GMT

- أيضا يمكن استخدام methods مدمجة في الـ date object لمعرفة التوقيت أو اليوم أو الساعة إلخ مثل:

Code


  let myTime = new Date();
  console.log(myTime.getDate())//22

يقوم الكود السابق بإرجاع اليوم من التاريخ 22/9/2023

Code


  console.log(myTime.getDay())//5

ي قوم الكود السابق بتحديد رقم اليوم في الاسبوع حيث يتعامل مع أيام الإسبوع علي أنهم عناصر في array تبدأ من يوم الأحد بـ index 0 و لتحديد اسم اليوم يمكننا إستخدام الكود التالي:

Code


  let myTime = new Date();
  let days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  console.log(days[myTime.getDay()])//Friday
  console.log(myTime.getFullYear())//2023
  console.log(myTime.getHours())//19 الساعة السابعة مساء بحساب ال24 ساعة
  console.log(myTime.getMilliseconds())//83 الميللي ثانية في التوقيت 
  console.log(myTime.getMinutes())//21 
  console.log(myTime.getMonth())//8

ف ي الكود السابف نحصل علي رقم 8 مع أن التاريخ يشير لشهر سبتمبر و هو الشهر التاسع في التقويم و لكن الـ JS تعتبر الشهور array تبدأ من يناير حتي ديسمبر و يحمل يناير الـ index no 0 و لذلك يكون شهر سبتمبر رقمه 8 في هذه الـ array لإيجاد اسم الشهر نستخدم الكود التالي

Code


  let myTime = new Date();
  let months = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
  console.log(months[myTime.getMonth()])// September
  
  console.log(myTime.getSeconds())//5
  console.log(myTime.getTime())//1695439507275 عدد الميلي ثانية من تاريخ 1 يناير 1970 و هو 
  تاريخ البدء الذي تقوم استخدامه أجهزة الكمبوتر
  
  console.log(myTime.getTimezoneOffset())//420 الفرق بين التوقيت المحلي و توقيت جرينتش بالدقائق
  console.log(myTime.getUTCDate())//23

رقم اليوم في التاريخ من 0 إلي 30 و بذلك يكون يوم 22 من الشهر هو 23 لان الشهر في تلك الحالة يبدأ من 0 و ليس من 1

Code


  console.log(myTime.getUTCDay())//6
  console.log(myTime.getUTCFullYear())//2023
  console.log(myTime.getUTCHours())//2 الساعة بتوقيت جرينتش
  console.log(myTime.getUTCMilliseconds())//317 عدد الميلي ثانية في الوقت الحالي
  console.log(myTime.getUTCMinutes())//37 الدقائق في الوقت الحالي
  console.log(myTime.getUTCMonth())// 8 رقم الشهر كما ذكرنا في مثال سابق
  console.log(myTime.getUTCSeconds())// 22 عدد الثواني في التاريخ

- أيضا يمكن تغيير التاريخ و الوقت عن طريق الـ methods التالية تغيير تاريخ اليوم بالكود التالي

Code


  let myTime = new Date();
  console.log(myTime) //2023-09-23T03:32:56.987Z
  myTime.setDate(10);
  console.log(myTime) //2023-09-11T03:32:56.987Z

ف ي المثال السابق يتم تغيير تاريخ اليوم و لكن يجب مراعاة أن بالنسبة للـ js فإن اليوم يبدأ من صفر لذلك اليوم الذي يوافق الـ index no 10 هو اليوم الـ 11 في الشهر تعتبر الـ JS أن الأيام من 0 لـ 30 فماذا لو قمنا بتحديد رقم اليوم 32 مثلا؟

Code


  let myTime = new Date();
  console.log(myTime) //2023-09-23T03:50:32.507Z
  myTime.setDate(32);
  console.log(myTime) //2023-10-03T03:50:32.507Z

ستقوم الـ JS بإعتبار أن شهر سبتمبر 30 يوم أي أن أخر يوم في الشهر يكون ترتيبه 29 و طرحه من الرقم الذي قمنا بإدخاله و هو رقم 32 سيتبقي 3 ستقوم الـ js بإعتبارهم 3 أيام من الشهر الجديد فستقوم بزيادة الشهر بدلا من شهر سبتمبر سيكون شهر أكتوبر و تحديد تاريخ اليوم بـ 3 و هكذا لو قمنا بتحديد رقم الشهر بأكثر من 11 مثل

Code


  let myTime = new Date();
  console.log(myTime) //2023-09-23T03:54:59.273Z
  myTime.setMonth(15);
  console.log(myTime) //2024-04-23T03:54:59.273Z

في الكود السابق لتحديد شهر ديسمبر نقوم بعمل setMonth لـ 11 و لكن الـ 15 التي قمنا بتمريرها للـ method أكبر من أخر شهر من السنة بـ 4 لذلك سيقوم بزيادة سنة أخري و تحديد الشهر بها بإبريل

Code


  myTime.setFullYear(2004); //2004-09-23T03:40:31.849Z تغيير السنة في التاريخ
  ايضا يمكن تغيير الشهر من نفس الـ method هكذا مع مراعاة أن الشهر optional
  myTime.setFullYear(2024,10); 
  تغيير الشهر
  let myTime = new Date();
  console.log(myTime) //2023-09-23T04:01:07.702Z
  myTime.setMonth(4); // تغيير التاريخ لشهر مايو و هو الشهر الخامس من شهور السنة و لكن يناير يعتبر الشهر رقم 0
  console.log(myTime) //2023-05-23T04:01:07.702Z 
  //أيضا يمكن تغيير اليوم مع الشهر هكذا
  let myTime = new Date();
  console.log(myTime) //2023-09-23T04:05:08.120Z
  myTime.setMonth(4,3); 
  console.log(myTime) //2023-05-04T04:05:08.120Z

و يلاحظ أن الـ argument الثاني الذي يتم تغيير اليوم منه optional أيضا أن أيام الشهر تبدأ من الصفر لذلك اليوم الرابع من الشهر يكون في الـ index no 3 و هكذا بالنسبة لتغيير الساعة setHours و تغيير الدقيقة setMinutes و تغيير الثانية setSeconds و تغيير الميللي ثانية setMilliseconds مع ملاحظة أن setHours تستطيع تغيير الدقائق و الثواني و الميللي ثانية و لكن الـ arguments الخاصة بهم optional و setMinutes تستطيع تغيير الثواني و الميللي ثانية و لكن الـ arguments الخاصة بهم optional و setSeconds يمكن تغيير الميللي ثانية و لكن الـ argument الخاصة بها optional - أيضا يمكن تعيين تاريخ عن طريق

Code


  let myTime = new Date('8/12/2000');
  console.log(myTime) //2000-08-12T07:00:00.000Z
  //أو بأكثر من طريقة أخري تعطي نفس النتيجة 
  let myTime = new Date('8-12-2000');
  let myTime = new Date('8*12*2000');
  let myTime = new Date('8%12%2000');

أي أننا نستطيع فصل اليوم عن الشهر عن السنة بأي علامة حتي لو بعلامتين مختلفتين كما بالكود التالي

Code


  let myTime = new Date('8%12*2000');

أيضا يمكن تمرير للـ Date constructor قيمة رقمية فمثلا الكود التالي:

Code


  let myTime = new Date(0);
  console.log(myTime) //1970-01-01T00:00:00.000Z

و هو يمثل تاريخ البداية بالنسبة لأجهزة الكمبيوتر و هو يقوم بتحويل القيمة الرقمية بالميللي ثانية إلي تاريخ مثل

Code


  let myTime = new Date(1455825699989);
  console.log(myTime) //2016-02-18T20:01:39.989Z

1/1/2/4 JavaScript fundamentals 'Handling Date and Time'

Web Development MEAN-Stack from A to Z Fundamentals Level1

The date is considered an object data type, which is one of the non-primitive data types. We will discuss the difference between non-primitive data types and primitive data types later. Therefore, it is important to note that discussing date handling here is not because dates are similar to numbers and textual data in terms of type, but for another reason, which is the common use of handling numbers, texts, and dates as they represent most of the data we deal with on a daily basis.

Handling date and time is something every programmer deals with regularly, so we need to familiarize ourselves with the methods and properties related to date and time.
- Getting today's date

Code


    let myTime = new Date();
    console.log(myTime) //2023-09-23T01:57:57.515Z

In the previous code, we created an instance of the Date object to get the current date and time. JS writes it in the following format:
2023-09-23T01:57:57.515Z
The date followed by the letter T, then the time in hours, minutes, seconds, and milliseconds. - Ways to convert the date in JS can be seen in the following code:

Code


    let myTime = new Date();
    console.log(myTime.toISOString()) //2023-09-23T02:08:51.992Z

The letter Z represents the timezone.

Code


    console.log(myTime.toDateString())//Fri Sep 22 2023
    console.log(myTime.toJSON())//2023-09-23T02:10:32.786Z
    console.log(myTime.toLocaleDateString())//9/22/2023
    console.log(myTime.toLocaleString())//9/22/2023, 7:11:56 PM

The date and time in the local timezone (if this method is called in the browser, it represents the user's timezone, and if used in Node.js, it represents the server's timezone).

Code


    console.log(myTime.toLocaleTimeString())//7:12:44 PM Local time
    console.log(myTime.toString())//Fri Sep 22 2023 19:13:35 GMT-0700 (Pacific Daylight Time)
    console.log(myTime.toTimeString())//19:14:24 GMT-0700 (Pacific Daylight Time) Local time
    console.log(myTime.toUTCString())//Sat, 23 Sep 2023 02:15:43 GMT

- You can also use built-in methods in the Date object to get the time, day, hour, etc., such as:

Code


    let myTime = new Date();
    console.log(myTime.getDate())//22

The previous code returns the day of the month: 22/9/2023.

Code


    console.log(myTime.getDay())//5

The previous code determines the day of the week as a number, where it treats the days of the week as elements in an array starting from Sunday with index 0. To determine the name of the day, we can use the following code:

Code


    let myTime = new Date();
    let days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    console.log(days[myTime.getDay()])//Friday
    console.log(myTime.getFullYear())//2023
    console.log(myTime.getHours())//19 7 PM in 24-hour format
    console.log(myTime.getMilliseconds())//83 Milliseconds in the time
    console.log(myTime.getMinutes())//21 
    console.log(myTime.getMonth())//8

In the previous code, we get the number 8, even though the date refers to September, which is the ninth month in the calendar. However, JS considers months as an array starting from January to December, with January having index 0. Therefore, September is number 8 in this array. To find the name of the month, we use the following code:

Code


    let myTime = new Date();
    let months = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
    console.log(months[myTime.getMonth()])// September
    
    console.log(myTime.getSeconds())//5
    console.log(myTime.getTime())//1695439507275 Number of milliseconds since January 1, 1970, which is the start date used by computers.
    
    console.log(myTime.getTimezoneOffset())//420 The difference between local time and GMT in minutes
    console.log(myTime.getUTCDate())//23

The day of the month in the date ranges from 0 to 30, so the 22nd day of the month is 23 because the month in this case starts from 0, not 1.

Code


    console.log(myTime.getUTCDay())//6
    console.log(myTime.getUTCFullYear())//2023
    console.log(myTime.getUTCHours())//2 Hour in GMT
    console.log(myTime.getUTCMilliseconds())//317 Number of milliseconds in the current time
    console.log(myTime.getUTCMinutes())//37 Minutes in the current time
    console.log(myTime.getUTCMonth())// 8 Month number as mentioned in a previous example
    console.log(myTime.getUTCSeconds())// 22 Number of seconds in the date

- You can also change the date and time using the following methods: Changing the day of the month with the following code:

Code


    let myTime = new Date();
    console.log(myTime) //2023-09-23T03:32:56.987Z
    myTime.setDate(10);
    console.log(myTime) //2023-09-11T03:32:56.987Z

In the previous example, the day of the month is changed, but it should be noted that in JS, the day starts from 0, so the day corresponding to index number 10 is the 11th day of the month. JS considers days from 0 to 30, so what if we set the day to 32, for example?

Code


    let myTime = new Date();
    console.log(myTime) //2023-09-23T03:50:32.507Z
    myTime.setDate(32);
    console.log(myTime) //2023-10-03T03:50:32.507Z

JS will consider that September has 30 days, meaning the last day of the month is 29. Subtracting this from the number we entered, which is 32, will leave 3. JS will consider them as 3 days of the new month, so it will increase the month from September to October and set the day to 3. Similarly, if we set the month number to more than 11, like:

Code


    let myTime = new Date();
    console.log(myTime) //2023-09-23T03:54:59.273Z
    myTime.setMonth(15);
    console.log(myTime) //2024-04-23T03:54:59.273Z

In the previous code, to set the month to December, we use setMonth to 11, but the 15 we passed to the method is 4 more than the last month of the year, so it will add another year and set the month to April.

Code


    myTime.setFullYear(2004); //2004-09-23T03:40:31.849Z Changing the year in the date
    You can also change the month from the same method like this, noting that the month is optional:
    myTime.setFullYear(2024,10); 
    Changing the month
    let myTime = new Date();
    console.log(myTime) //2023-09-23T04:01:07.702Z
    myTime.setMonth(4); // Changing the date to May, which is the fifth month of the year, but January is considered month number 0
    console.log(myTime) //2023-05-23T04:01:07.702Z 
    //You can also change the day along with the month like this:
    let myTime = new Date();
    console.log(myTime) //2023-09-23T04:05:08.120Z
    myTime.setMonth(4,3); 
    console.log(myTime) //2023-05-04T04:05:08.120Z

It is noted that the second argument, which changes the day, is also optional. Also, the days of the month start from 0, so the 4th day of the month is at index number 3. The same applies to changing the hour with setHours, changing the minutes with setMinutes, changing the seconds with setSeconds, and changing the milliseconds with setMilliseconds, noting that setHours can change the minutes, seconds, and milliseconds, but their arguments are optional. setMinutes can change the seconds and milliseconds, but their arguments are optional. setSeconds can change the milliseconds, but its argument is optional. - You can also set a date using:

Code


    let myTime = new Date('8/12/2000');
    console.log(myTime) //2000-08-12T07:00:00.000Z
    //Or in other ways that give the same result:
    let myTime = new Date('8-12-2000');
    let myTime = new Date('8*12*2000');
    let myTime = new Date('8%12%2000');

We can separate the day, month, and year with any symbol, even with two different symbols, as in the following code:

Code


    let myTime = new Date('8%12*2000');

You can also pass a numeric value to the Date constructor, for example, the following code:

Code


    let myTime = new Date(0);
    console.log(myTime) //1970-01-01T00:00:00.000Z

This represents the start date for computers. It converts the numeric value in milliseconds to a date, like:

Code


    let myTime = new Date(1455825699989);
    console.log(myTime) //2016-02-18T20:01:39.989Z

February 27, 2025

Course

دورة تدريبية

4/2/1/1 أساسيات الجافاسكريبت 'التعامل مع التاريخ و الوقت'

1/1/2/4 JavaScript fundamentals 'Handling Date and Time'

Read More

إقرأ المزيد

دورة تدريبية

Course

9/2/1/1 أساسيات الجافاسكريبت 'الـ Objects'

1/1/2/9 JavaScript fundamentals: 'Objects'

التسويق الرياضي في أندية الشركات و صناعة الجماهيرية

Sports Marketing in Corporate Clubs and the Fanbase Industry

مشكلة التسويق الرقمي بين الإختزال و الأوهام

The Problem of Digital Marketing Between Reductionism and Illusions

دورة تدريبية

Course

3/2/1/1 أساسيات الجافاسكريبت 'التعامل مع النصوص'

1/1/2/3 JavaScript fundamentals 'Working with Strings'

دورة تدريبية

Course

8/2/1/1 أساسيات الجافاسكريبت 'الـ Arrays'

1/1/2/8 JavaScript fundamentals 'Arrays'

Keywords

كلمات مفتاحية