التاريخ والوقت

ال حقل التاريخ والوقت يمنح عنصر واجهة المستخدم المخصص منتقي تقويم مناسبًا بدلاً من مربع تاريخ النص الحر. ينقر المحررون على الحقل في Elementor، ويتم فتح تقويم Flatpickr، ويختارون تاريخًا (واختياريًا وقتًا) دون القلق أبدًا بشأن كتابة التنسيق الذي تتوقعه عنصر واجهة المستخدم الخاص بك. داخل الإضافات الرئيسية منشئ القطعةهذا الاتساق هو بيت القصيد: تصل القيمة دائمًا بتنسيق يمكن التنبؤ به يمكن للقالب والبرنامج النصي الاعتماد عليه.

يدعم حقل التاريخ والوقت شروط مثل كل عنصر تحكم، وقيمته تطبع من خلال محرك قالب بناء جملة الغصين، حتى تتمكن من مقارنتها أو تغليفها {% if %} كتل في القالب الخاص بك. يغطي كلا الدليلين الإعداد والقيود.

يتصل الحقل من خلال رمز مميز مثل كل حقل قيمة بسيط. يطبع {{ event_date }} في لوحة HTML لعرض التاريخ، أو تسليمه إلى لوحة JS حيث يمكن للعد التنازلي أو التحقق من ساعات الافتتاح أو البرنامج النصي للجدولة تحليله.

ماذا يفعل حقل التاريخ والوقت #

• يعرض منتقي التقويم بالنقر للفتح (Flatpickr) في لوحة Elementor الخاصة بالعنصر واجهة المستخدم.
• يتضمن اختياريًا محدد الوقت بجانب التقويم.
• يخزن الاختيار كسلسلة منسقة، ويتم تطبيعها إلى Y-m-d H:i مع تمكين الوقت أو Y-m-d بدونها.
• يطبع تلك السلسلة في أي مكان في لوحة HTML أو CSS أو JS من خلاله {{ your_field_name }}.
• يغذي JavaScript مباشرة، وهو المسار المعتاد لعناصر واجهة المستخدم للعد التنازلي والجدولة.

إذا كانت عناصر واجهة المستخدم المخصصة منطقة جديدة، فإن نظرة عامة على منشئ القطعة هي نقطة البداية الأفضل؛ تفترض هذه الصفحة أنك تعرف طريقك حول المحرر.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة العد التنازلي للحدث مع حقل التاريخ والوقت المسمى event_date أن البرنامج النصي للأداة يعد تنازليًا.

كيفية إضافة حقل التاريخ والوقت #

اسحب التاريخ والوقت الحقل من لوحة الحقول إلى قسم أسفل محتوى علامة التبويب. تفتح خياراته على اليسار بمجرد هبوطه.

تم شرح خيارات حقل التاريخ والوقت #

• ملصق: النص الموضح بجوار المنتقي في Elementor، على سبيل المثال “Event Date”.
• اسم: المعرف الفريد الذي تشير إليه قوالبك. الحروف والأرقام والتسطير فقط، على سبيل المثال event_date.
• الافتراضي: سلسلة تاريخ البدء التي تأتي بها الأداة.
• تمكين الوقت: يضيف محدد الساعة والدقيقة إلى التقويم. مع تشغيله، تظهر القيم كـ Y-m-d H:i (مثل 2026-12-31 18:00)؛ معها قبالة، كما عادي Y-m-d تاريخ.
• زيادة الدقيقة: الخطوة التي يتحرك فيها محدد الدقيقة، بحيث يمكن أن يقتصر المحررون على 5 أو 15 أو 30 دقيقة.
• الوصف، إظهار التسمية، الفاصل: خيارات العرض القياسية، بالإضافة إلى شروط عرض الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

تحت غطاء محرك السيارة يقبل المنتقي أ picker_options كائن مع المزيد من إعدادات Flatpickr، بما في ذلك noCalendar لمنتقي الوقت فقط، dateFormat, time_24hr، و minDate/maxDate حدود. تحتفظ واجهة مستخدم المنشئ بالقيم الشائعة، تمكين زيادة الوقت والدقيقة، الأمامية والوسطى، ويقوم وقت التشغيل بتطبيع القيم المخزنة إلى التنسيقين أعلاه في كلتا الحالتين.

قم بتوصيل حقل التاريخ والوقت بالرمز المميز الخاص به #

حقل التاريخ والوقت هو حقل رمز مميز. عرض التاريخ هو رمز مميز واحد في لوحة HTML:

<p class="event-when">Doors open {{ event_date }}</p>

الأسلاك الأكثر شيوعًا هي لوحة JS. لأن القيمة مستقرة Y-m-d H:i يمكن لـ String وJavaScript تحليلها وإجراء العد التنازلي

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

شيء واحد يستحق المعرفة قبل الإطلاق الدولي: التاريخ الذي تم تحليله ليس له منطقة زمنية مرفقة، لذا new Date() يفسر ذلك في التوقيت المحلي لكل زائر. ينتهي العد التنازلي لـ “18:00” في الساعة 18:00 في برلين ومرة أخرى في الساعة 18:00 في نيويورك. للحصول على موعد نهائي عالمي واحد، قم بإلحاق إزاحة صريحة مثل +00:00 إلى السلسلة قبل التحليل.

احترس: يطبع الرمز المميز سلسلة عادية، لذا اقتبسها بلغة JavaScript. var deadline = "{{ event_date }}"; يعمل؛ بدون علامات الاقتباس، تكون القيمة المعروضة خطأ في بناء الجملة. وبما أن التنسيق تم إصلاحه بواسطة إعداد تمكين الوقت، فقرر مقدمًا ما إذا كان البرنامج النصي الخاص بك يتوقع ذلك أم لا 2026-12-31 أو 2026-12-31 18:00، ثم حافظ على التبديل متسقًا معه.

استخدم التحكم في التاريخ والوقت في Elementor #

أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يظهر الحقل كمدخل بنمط نص تحت التسمية الخاصة بك؛ يؤدي النقر فوقه إلى فتح نافذة التقويم المنبثقة.

اختر يومًا، ومع تمكين الوقت، قم بتعيين الساعة والدقائق أسفل التقويم. يمتلئ الإدخال بالقيمة المنسقة وتحديثات المعاينة. لا يكتب المحررون التاريخ يدويًا أبدًا، لذا فإن التنسيق الذي يوزعه البرنامج النصي الخاص بك هو دائمًا التنسيق الذي يصل.

حالات الاستخدام الشائعة #

• الحاجيات العد التنازلي لعمليات الإطلاق والمبيعات والأحداث، حيث تقوم لجنة JS بالحسابات.
• بطاقات الأحداث التي تطبع تاريخًا منسقًا بجوار المكان والعنوان.
• لافتات العرض المحدود أن يخفي البرنامج النصي بمجرد انقضاء الموعد النهائي.
• يعرض الحجز والجدول الزمني حيث تغذي أوقات الفتح أو الإغلاق العلامات.
• “تم نشر البيانات التعريفية لأسلوب” لعناصر واجهة المستخدم المحتوى المخصصة.

نصائح للعمل مع حقل التاريخ والوقت #

• مطابقة تمكين الوقت للمهمة. العد التنازلي يحتاج إلى مكون الوقت؛ لا يوجد خط “ منشور على”. يتبع التنسيق المخزن التبديل.
• اقتبس الرمز المميز في JS. القيمة عبارة عن سلسلة، والتواريخ غير المقتبسة تكسر البرنامج النصي لحظة عرضه.
• تطبيع قبل التحليل. استبدال المساحة ب T، كما في مثال العد التنازلي، يحتفظ new Date() تحليل متسق عبر المتصفحات.
• تعيين الافتراضي في المستقبل بالنسبة لعناصر واجهة المستخدم للعد التنازلي، يتم العد التنازلي لإسقاط جديد بدلاً من إظهار الأصفار.
• استخدم زيادة الدقائق لتقليل الضوضاء. يعد اختيار وقراءة الخطوات التي تبلغ مدتها خمسة عشر دقيقة أسهل من اختيار وقراءة الدقائق العشوائية.
• التعامل مع الماضي. قرر في البرنامج النصي ما يحدث عند انقضاء الموعد النهائي: إخفاء الأداة، أو إظهار رسالة، أو التوقف عند الصفر.

الأسئلة المتداولة #

إلتحاق بالركب #

يقوم حقل تاريخ إنشاء عناصر واجهة المستخدم بإخراج إدخال التاريخ من أيدي المحررين ويضع سلسلة يمكن التنبؤ بها في يدك: منتقي واحد في اللوحة، ورمز مميز واحد في القالب، والتنسيقات التي يمكن للبرامج النصية تحليلها بدون تعليمات برمجية دفاعية. إقرانها مع حقل الجلاد لتبديل سلوك الحالة منتهية الصلاحية، أو حقل الرقم لفترات التحديث القابلة للضبط. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.