أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

مثال تحويل التاريخ بين الميلادي والهجري باستخدام HTML وJavaScript الدرس#8

kroom87 kroom87

يعتبر تحويل التواريخ بين التقويمين الميلادي والهجري من الأمور الأساسية التي يحتاجها الكثير من الناس، خاصة في الدول التي تعتمد على التقويم الهجري بشكل رئيسي. في هذا المقال، سنقدم لكم كيفية بناء صفحة ويب باستخدام HTML وJavaScript تمكن المستخدمين من إدخال تاريخ ميلادي وتحويله إلى التاريخ الهجري، والعكس بالعكس. سنستخدم مكتبة moment وmoment-hijri لتسهيل عمليات التحويل، وسنعتمد على حقول إدخال ونماذج منظمة بشكل جيد لضمان سهولة الاستخدام.


يحتوي الجزء الرئيسي من الكود على بناء الهيكل الأساسي للصفحة باستخدام لغة HTML. يتم هنا تحديد العناوين، الحقول، والأزرار التي سيتم استخدامها لإدخال التواريخ وعرض النتائج.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تحويل التاريخ بين الميلادي والهجري</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            direction: rtl;
            text-align: right;
            padding: 20px;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        h1, label {
            margin: 10px 0;
        }
        .date-input-wrapper {
            display: flex;
            justify-content: flex-end;
        }
        .date-input-wrapper input[type="date"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            direction: rtl;
        }
        select,
        button {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background-color: #e0e0e0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 20px;
            text-align: center;
        }
        .hijri-date {
            display: flex;
            justify-content: space-between;
        }
        .hijri-date select {
            width: 32%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>تحويل التاريخ بين الميلادي والهجري</h1>
        
        <label for="gregorianDate">التاريخ الميلادي:</label>
        <div class="date-input-wrapper">
            <input type="date" id="gregorianDate">
        </div>
        <button onclick="convertToHijri()">تحويل إلى هجري</button>
        
        <label for="hijriDate">التاريخ الهجري:</label>
        <div class="hijri-date">
            <select id="hijriDay"></select>
            <select id="hijriMonth"></select>
            <select id="hijriYear"></select>
        </div>
        <button onclick="convertToGregorian()">تحويل إلى ميلادي</button>
        
        <div id="result" class="result"></div>
    </div>
    <!-- تحميل مكتبات moment و moment-hijri -->
    <script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <script src="https://cdn.rawgit.com/xsoh/moment-hijri/master/moment-hijri.js"></script>
    <script>
        // تعبئة الأيام من 1 إلى 30
        var daysSelect = document.getElementById('hijriDay');
        for (var i = 1; i <= 30; i++) {
            var option = document.createElement('option');
            option.value = i;
            option.text = i;
            daysSelect.appendChild(option);
        }
        // تعبئة الأشهر مع الأسماء الهجرية
        var monthsSelect = document.getElementById('hijriMonth');
        var months = ["محرم", "صفر", "ربيع الأول", "ربيع الآخر", "جمادى الأولى", "جمادى الآخرة", "رجب", "شعبان", "رمضان", "شوال", "ذو القعدة", "ذو الحجة"];
        for (var i = 0; i < months.length; i++) {
            var option = document.createElement('option');
            option.value = i + 1;
            option.text = months[i];
            monthsSelect.appendChild(option);
        }
        // تعبئة السنوات الهجرية
        var yearsSelect = document.getElementById('hijriYear');
        var currentYear = moment().iYear();
        for (var i = currentYear - 100; i <= currentYear + 20; i++) {
            var option = document.createElement('option');
            option.value = i;
            option.text = i;
            yearsSelect.appendChild(option);
        }
        function convertToHijri() {
            var gregorianDate = document.getElementById("gregorianDate").value;
            if (!gregorianDate) {
                alert("يرجى إدخال التاريخ الميلادي.");
                return;
            }
            // ضبط اللغة إلى العربية
            moment.locale('ar-SA');
            // تحويل التاريخ الميلادي إلى هجري
            var hijriDate = moment(gregorianDate, 'YYYY-MM-DD').format('iYYYY/iM/iD هـ الموافق YYYY/MM/DD م');
            
            document.getElementById("result").textContent = "التاريخ الهجري: " + hijriDate;
        }
        function convertToGregorian() {
            var hijriDay = document.getElementById('hijriDay').value;
            var hijriMonth = document.getElementById('hijriMonth').value;
            var hijriYear = document.getElementById('hijriYear').value;
            var hijriDate = hijriYear + '-' + hijriMonth + '-' + hijriDay;
            if (!hijriDay || !hijriMonth || !hijriYear) {
                alert("يرجى إدخال التاريخ الهجري.");
                return;
            }
            // ضبط اللغة إلى العربية
            moment.locale('ar-SA');
            // تحويل التاريخ الهجري إلى ميلادي
            var gregorianDate = moment(hijriDate, 'iYYYY-iMM-iDD').format('YYYY-MM-DD م الموافق iYYYY/iM/iD هـ');
            
            document.getElementById("result").textContent = "التاريخ الميلادي: " + gregorianDate;
        }
    </script>
</body>
</html>

شرح الكود

الرأس (Head)

  • العناصر الأساسية:
    • <meta charset="UTF-8">: لتحديد الترميز المستخدم في الصفحة.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: لجعل الصفحة متجاوبة مع جميع أحجام الشاشات.
    • <title>: عنوان الصفحة الذي يظهر في علامة التبويب.
  • تنسيق الصفحة باستخدام CSS:
    • يتم استخدام نمطية CSS لتحديد مظهر العناصر المختلفة مثل الجسم (body)، الحاوية (container)، عناوين النصوص، الحقول، الأزرار، والمربعات.

الجسم (Body)

  • العناصر المرئية:
    • h1: عنوان رئيسي للصفحة يوضح الغرض من الصفحة (تحويل التاريخ بين الميلادي والهجري).
    • label: لتوفير نص توضيحي للحقل الذي يليه.
    • input[type="date"]: حقل إدخال التاريخ الميلادي.
    • select: قوائم منسدلة لإدخال اليوم، الشهر، والسنة الهجرية.
    • button: أزرار لتنفيذ عمليات التحويل.
    • div.result: مربع لعرض نتيجة التحويل.

JavaScript

  • تحميل مكتبات moment وmoment-hijri:

    • <script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
    • <script src="https://cdn.rawgit.com/xsoh/moment-hijri/master/moment-hijri.js"></script>

  • تعبئة القوائم المنسدلة:

    • الأيام: يتم تعبئة قائمة الأيام من 1 إلى 30.
    • الأشهر: يتم تعبئة قائمة الأشهر بأسماء الأشهر الهجرية.
    • السنوات: يتم تعبئة قائمة السنوات من 100 سنة ماضية إلى 20 سنة قادمة.

  • وظائف التحويل:

    • convertToHijri: تحويل التاريخ الميلادي المدخل إلى تاريخ هجري وعرضه في المربع.
    • convertToGregorian: تحويل التاريخ الهجري المدخل إلى تاريخ ميلادي وعرضه في المربع.

خطوات التطبيق

  1. إنشاء ملف HTML:

    • افتح محرر النصوص المفضل لديك (مثل Notepad أو Visual Studio Code).
    • قم بإنشاء ملف جديد واحفظه باسم index.html.

  2. نسخ ولصق الكود:

    • انسخ الكود المقدم أعلاه والصقه في ملف index.html.

  3. عرض الملف في المتصفح:

    • افتح المجلد الذي يحتوي على ملف index.html.
    • انقر بزر الفأرة الأيمن على الملف واختر "فتح باستخدام" (Open With) ثم اختر المتصفح الذي تفضله (مثل Google Chrome أو Firefox).
kroom87
kroom87

مقالات قد تهمك

تعليقات