Date And Time

🕒 أولًا: ما هو الكائن Date في JavaScript؟

JavaScript توفر كائنًا مدمجًا يُسمى Date يستخدم للعمل مع التاريخ والوقت.

Unix Time: أو ما يُعرف أيضًا بـ Epoch Time هو نظام يستخدمه الحاسوب لحساب الوقت، ويُعبّر عنه بعدد الثواني التي مرت منذ 1 يناير 1970 الساعة 00:00:00 UTC، وهو ما يُعرف بـ “Unix Epoch”.

✅ شرح مبسط:
  • يتم تمثيل الوقت في نظام Unix كرقم صحيح (Integer).
  • هذا الرقم يزداد بثانية واحدة كل ثانية.
  • مثلاً:
    • 0 يعني: 1 يناير 1970 الساعة 00:00:00 بالتوقيت العالمي (UTC).
    • 1700000000 يعني: الوقت الذي مرّ منذ تلك اللحظة حتى وقت معين، ويُستخدم كثيرًا في البرمجة وقواعد البيانات.
✅ لماذا 1970؟

تم اختيار هذا التاريخ كبداية (epoch) لأنه كان مناسبًا وبسيطًا لأنظمة Unix التي طُورت في ذلك الوقت، ولأنّه لا يرتبط بحدث ديني أو تاريخي معين.

✅ استخداماته:
  • تخزين الوقت والتاريخ في قواعد البيانات.
  • جدولة المهام (cron jobs).
  • مقارنة بين تواريخ.
  • توقيتات الأحداث في ملفات اللوجات (logs).
النظامالوحدة المستخدمة
Unix / Linuxثواني
PHPثواني
Pythonثواني
JavaScriptملّي ثانية
بعض قواعد البياناتعادة ثواني، لكن يمكن استخدام ملّي ثانية حسب النوع
✅ مثال:
إنشاء كائن تاريخ جديد:
let now = new Date();
console.log(now);
JavaScript

🔹 هذا يعطينا التاريخ والوقت الحالي على حسب التوقيت المحلي.

🧱 طرق إنشاء كائن Date
1. new Date()
let date1 = new Date();
JavaScript

يعطيك التاريخ والوقت الحالي.

2. new Date(milliseconds)

let date2 = new Date(0); // بداية الـ Unix Time (1 Jan 1970)
JavaScript

🔹 تستخدم هذه الطريقة رقمًا يمثل عدد الميلي ثانية منذ 1 يناير 1970.

let date3 = new Date(24 * 60 * 60 * 1000); // يوم واحد بعد 1 يناير 1970
JavaScript

3. new Date(dateString)

let date4 = new Date("2023-10-01T10:30:00");
JavaScript

🔹 تقبل سلسلة نصية بتنسيق معياري (ISO 8601).

4. new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

let date5 = new Date(2023, 9, 1, 10, 30); // أكتوبر (تذكّر: الشهر يبدأ من 0)
JavaScript

🔹 ملاحظة: الشهر يبدأ من 0 وليس 1، أي أن 0 = يناير، و 11 = ديسمبر.

⌛️ قراءة أجزاء من التاريخ:

الوظيفةالوصفمثال
getFullYear()السنةdate.getFullYear()
getMonth()الشهر (0-11)date.getMonth()
getDate()اليوم من الشهر (1-31)date.getDate()
getDay()اليوم من الأسبوع (0=الأحد)date.getDay()
getHours()الساعةdate.getHours()
getMinutes()الدقائقdate.getMinutes()
getSeconds()الثوانيdate.getSeconds()
getMilliseconds()أجزاء من الثانيةdate.getMilliseconds()
let date = new Date("2024-12-25T15:45:30");

console.log("السنة:", date.getFullYear());     // 2024
console.log("الشهر:", date.getMonth());        // 11
console.log("اليوم:", date.getDate());         // 25
console.log("اليوم في الأسبوع:", date.getDay()); // 3 (الأربعاء)
console.log("الساعة:", date.getHours());       // 15
console.log("الدقائق:", date.getMinutes());    // 45
console.log("الثواني:", date.getSeconds());    // 30
JavaScript

🛠 تعديل الوقت والتاريخ:

الوظيفةالوصف
setFullYear(year)ضبط السنة
setMonth(month)ضبط الشهر
setDate(day)ضبط اليوم
setHours(hours)ضبط الساعة
setMinutes(minutes)ضبط الدقائق
setSeconds(seconds)ضبط الثواني
let d = new Date();
d.setFullYear(2030);
d.setMonth(5); // يونيو
d.setDate(15);
console.log(d); // 15 يونيو 2030
JavaScript
🧮 العمليات على التواريخ:
مقارنة تواريخ:
let d1 = new Date("2025-01-01");
let d2 = new Date("2024-01-01");

console.log(d1 > d2); // true
JavaScript

الفرق بين تاريخين (بالميلي ثانية):

let d1 = new Date("2025-01-01");
let d2 = new Date("2024-01-01");

let diff = d1 - d2;
console.log(diff / (1000 * 60 * 60 * 24)); // عدد الأيام
JavaScript
🌐 تنسيقات العرض:
toString() – عرض التاريخ الكامل
console.log(new Date().toString());
JavaScript

toDateString() – فقط التاريخ

console.log(new Date().toDateString());
JavaScript

toTimeString() – فقط الوقت

console.log(new Date().toTimeString());
JavaScript

toLocaleDateString() – التاريخ بصيغة اللغة المحلية

console.log(new Date().toLocaleDateString('ar-EG')); // تنسيق عربي
JavaScript

toISOString() – تنسيق ISO 8601

console.log(new Date().toISOString()); // مثال: 2025-05-29T12:00:00.000Z
JavaScript
⏳ توقيت Unix (Epoch Time):

هو عدد الميلي ثانية منذ 1 يناير 1970.

الحصول على الوقت الحالي:
console.log(Date.now()); // مثال: 1717000000000
JavaScript
⏲ استخدام التاريخ في التوقيت:
توقيت تأخير:
setTimeout(() => {
    console.log("بعد 3 ثواني");
}, 3000);
JavaScript

تكرار كل فترة:

setInterval(() => {
    console.log(new Date().toLocaleTimeString());
}, 1000); // كل ثانية
JavaScript
✅ نصائح مهمة:
  1. الشهر يبدأ من 0 (0 = يناير).
  2. Date.now() أسرع من new Date().getTime().
  3. استخدام toLocaleString() مع إعدادات اللغة يعطيك نتائج مخصصة للمستخدم.
  4. الفروق الزمنية تحسب بالميلي ثانية — انتبه للوحدات!
✅ 1. حساب العمر من تاريخ الميلاد
🧠 الفكرة:
  • المستخدم يُدخل تاريخ ميلاده.
  • نحسب الفرق بين اليوم الحالي وتاريخ الميلاد.
  • نستخرج عدد السنوات (العمر).
💻 الكود:
<input type="date" id="birthdate" />
<button onclick="calculateAge()">احسب العمر</button>
<p id="result"></p>

<script>
  function calculateAge() {
    let input = document.getElementById("birthdate").value;
    if (!input) return;

    let birthDate = new Date(input);
    let today = new Date();

    let age = today.getFullYear() - birthDate.getFullYear();

    // تصحيح إذا لم يصل الشخص إلى عيد ميلاده هذه السنة
    let monthDiff = today.getMonth() - birthDate.getMonth();
    let dayDiff = today.getDate() - birthDate.getDate();

    if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
      age--;
    }

    document.getElementById("result").textContent = `عمرك هو ${age} سنة`;
  }
</script>
JavaScript
✅ 2. عداد تنازلي لتاريخ معين (Countdown Timer)
🧠 الفكرة:
  • نحدد تاريخ مستقبلي (مثلاً: رأس السنة).
  • كل ثانية نحسب الفرق بين الآن وذلك التاريخ.
  • نعرض الأيام والساعات والدقائق والثواني المتبقية.
💻 الكود:
<p id="countdown"></p>

<script>
  // التاريخ المستهدف
  let targetDate = new Date("2025-01-01T00:00:00").getTime();

  let timer = setInterval(() => {
    let now = new Date().getTime();
    let diff = targetDate - now;

    if (diff <= 0) {
      clearInterval(timer);
      document.getElementById("countdown").textContent = "🎉 لقد وصلنا إلى الموعد!";
      return;
    }

    let days = Math.floor(diff / (1000 * 60 * 60 * 24));
    let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((diff % (1000 * 60)) / 1000);

    document.getElementById("countdown").textContent =
      `متبقي ${days} يوم، ${hours} ساعة، ${minutes} دقيقة، ${seconds} ثانية`;
  }, 1000);
</script>
JavaScript
✅ 3. ساعة رقمية حية (Digital Clock)
🧠 الفكرة:
  • نستخدم setInterval لتحديث الوقت كل ثانية.
  • نعرض الوقت بصيغة مناسبة.
💻 الكود:
<h2 id="clock"></h2>

<script>
  function updateClock() {
    let now = new Date();
    let time = now.toLocaleTimeString('ar-EG');
    document.getElementById("clock").textContent = time;
  }

  updateClock(); // مرة واحدة عند التحميل
  setInterval(updateClock, 1000); // كل ثانية
</script>
JavaScript