تصميم تقويم من خلال Lovable

Rol Ian · 25 يونيو

كيف يمكن أن أقوم بتصميم تقويم يشمل التاريخ الهجري والميلادي في موقع Lovable.dev وتكون الأوقات صحيحة

لأنه يظهر التاريخ الهجري خاطئ غير متوافق مع الميلادي

تم التعديل في 25 يونيو بواسطة Rol Ian

Mustafa Suleiman · 25 يونيو

عليك بتوجيه الأداة لاستخدام Intl.DateTimeFormat API المتاحة في المتصفح، وبمثال بسيط ستكتب السكريبت التالي:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="dual-calendar-container">
        <p class="gregorian-date"></p>
        <p class="hijri-date"></p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const today = new Date();

            const gregorianOptions = {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            };

            const gregorianDateFormatter = new Intl.DateTimeFormat('ar-EG', gregorianOptions);
            const gregorianDateString = gregorianDateFormatter.format(today);


            const hijriOptions = {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            };

            const hijriDateFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', hijriOptions);
            const hijriDateString = hijriDateFormatter.format(today);


            const container = document.getElementById('dual-calendar-container');
            if (container) {
                container.querySelector('.gregorian-date').textContent = `الميلادي: ${gregorianDateString}`;
                container.querySelector('.hijri-date').textContent = `الهجري: ${hijriDateString}`;
            }

        });
    </script>
</body>

</html>

تصميم تقويم من خلال Lovable

السؤال

Rol Ian

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية