الانتقال إلى المحتوى
القائمة
اللغة، حاليًا العربية
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

نظام تصميم rastrillo

نظرة عامة على كل ما يوفّره نظام التصميم. السمة: plain. اللغة: العربية.

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

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

عناصر واجهة جاهزة ومتّسقة فيما بينها، تُبنى في الخادم.

مفردات إطار العمل نفسه تسمّيها partials: تُرجع ui.Templates() قيم partials، ويوثّقها docs/site/templates.md بهذا الاسم. تغيّرت الكلمة في هذه الصفحة، ولم تتغيّر في الشيفرة.

الروابط هنا غير مفعّلة

الروابط غير مفعّلة، ومصدر العيّنة متاح.

كل عيّنة أدناه داخل إطارها الخاص.

محتوى العيّنات بالإنجليزية. أمّا أغلفة العيّنات فمترجمة.

field-date

حقل تاريخ أصلي، ومعه صندوق التحرير والسرد الذي يفعّله datetime.js ويفهم اللغة الطبيعية، ما لم يمرّر المستدعي Plain. اكتب فيه "غدًا".

حقل مُحسَّن: اكتب «غدًا» أو «بعد 3 أسابيع»

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_live">Publish on</label>
  <input rst-input id="field-date_live" name="field-date_live" type="date" value="2026-09-04" aria-describedby="field-date_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-hint id="field-date_live-hint">The day it goes live.</small>
</div></form></section>

الكلمات التي يحلّلها تخرج على ‎data-rst-date-words‎ مأخوذةً من فهرس هذه الصفحة: فالحقل يحلّل اللغة التي كُتبت بها الصفحة.

مطلوب، مع خطأ

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_error">Publish on <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-date_error" name="field-date_error" type="date" required aria-invalid="true" aria-describedby="field-date_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-error id="field-date_error-error">Pick a date after today.</small>
</div></form></section>

بحدّين

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_bounded">Within this year</label>
  <input rst-input id="field-date_bounded" name="field-date_bounded" type="date" value="2026-09-04" min="2026-01-01" max="2026-12-31" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div></form></section>

Plain — الحقل الأصلي كما هو

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_plain">Publish on</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div></form></section>

لا توجد أي سمات تحسين، فلا يجد datetime.js شيئًا. ومع ذلك يظل المنتقي الأصلي يفتح.

field-time

الغلاف نفسه حول حقل وقت أصلي. والتحسين هنا يقرأ ساعة لا تقويمًا.

حقل مُحسَّن: اكتب «السابعة والنصف» أو «الظهر»

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_live">Doors open</label>
  <input rst-input id="time_live" name="time_live" type="time" value="19:30" aria-describedby="time_live-hint" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-pick-time="فتح الساعة" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-hint id="time_live-hint">Local time.</small>
</div></form></section>

مطلوب، مع خطأ

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_error">Doors open <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="time_error" name="time_error" type="time" required aria-invalid="true" aria-describedby="time_error-error" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-pick-time="فتح الساعة" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-error id="time_error-error">Pick a time after the sound check.</small>
</div></form></section>

بحدّين

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_bounded">Between nine and eleven</label>
  <input rst-input id="time_bounded" name="time_bounded" type="time" value="19:30" min="09:00" max="23:00" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-pick-time="فتح الساعة" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div></form></section>

Plain — الحقل الأصلي كما هو

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_plain">Doors open</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div></form></section>

field-datetime

تاريخ ووقت في حقل واحد، وقيمة واحدة.

حقل مُحسَّن: اكتب «غدًا» أو «بعد 3 أسابيع»

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_live">Publish on</label>
  <input rst-input id="field-datetime_live" name="field-datetime_live" type="datetime-local" value="2026-09-04T19:30" aria-describedby="field-datetime_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-hint id="field-datetime_live-hint">When it goes live.</small>
</div></form></section>

الكلمات التي يحلّلها تخرج على ‎data-rst-date-words‎ مأخوذةً من فهرس هذه الصفحة: فالحقل يحلّل اللغة التي كُتبت بها الصفحة.

مطلوب، مع خطأ

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_error">Publish on <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-datetime_error" name="field-datetime_error" type="datetime-local" required aria-invalid="true" aria-describedby="field-datetime_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-error id="field-datetime_error-error">Pick a date after today.</small>
</div></form></section>

بحدّين

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_bounded">Within this year</label>
  <input rst-input id="field-datetime_bounded" name="field-datetime_bounded" type="datetime-local" value="2026-09-04T19:30" min="2026-01-01T00:00" max="2026-12-31T23:59" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div></form></section>

Plain — الحقل الأصلي كما هو

معاينة 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_plain">Publish on</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div></form></section>

لا توجد أي سمات تحسين، فلا يجد datetime.js شيئًا. ومع ذلك يظل المنتقي الأصلي يفتح.

field-daterange

بداية ونهاية ضمن مجموعة واحدة بتسمية. يجب أن تختلف قيم Name، لأن المعرّفات تُشتقّ منها.

تاريخ ووقت، بقيم مبدئية

معاينة 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-field-range>
  <legend>When</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
  <label rst-field-label for="dr_starts_at">Starts</label>
  <input rst-input id="dr_starts_at" name="dr_starts_at" type="datetime-local" value="2026-09-04T19:30" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div>
    <div rst-field>
  <label rst-field-label for="dr_ends_at">Ends</label>
  <input rst-input id="dr_ends_at" name="dr_ends_at" type="datetime-local" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div>
  </div>
</fieldset></form></section>

ثبّت البداية والنهاية ما تزال فارغة، فيملأ المتصفح النهاية بعد ساعة. ولا شيء مُعبّأ مسبقًا من الخادم.

تواريخ فقط، مع خطأ على طرف النهاية

معاينة 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-field-range>
  <legend>Booking</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
  <label rst-field-label for="dr_from">From</label>
  <input rst-input id="dr_from" name="dr_from" type="date" value="2026-09-04" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
</div>
    <div rst-field>
  <label rst-field-label for="dr_to">To</label>
  <input rst-input id="dr_to" name="dr_to" type="date" value="2026-09-01" aria-invalid="true" aria-describedby="dr_to-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;قبل|منذ&#34;,&#34;am&#34;:&#34;صباحا|صباحاً|ص|am&#34;,&#34;at&#34;:&#34;في|الساعة&#34;,&#34;day&#34;:&#34;يوم|أيام|ايام|يومين&#34;,&#34;hour&#34;:&#34;ساعة|ساعات|س|ساعتين&#34;,&#34;in&#34;:&#34;خلال|بعد&#34;,&#34;last&#34;:&#34;الماضي|الماضية|السابق|السابقة&#34;,&#34;midnight&#34;:&#34;منتصف الليل&#34;,&#34;minute&#34;:&#34;دقيقة|دقائق|د|دقيقتين&#34;,&#34;month&#34;:&#34;شهر|الشهر|أشهر|اشهر|شهور|شهرين&#34;,&#34;next&#34;:&#34;القادم|القادمة|المقبل|المقبلة&#34;,&#34;noon&#34;:&#34;الظهر|ظهرا|ظهراً&#34;,&#34;pm&#34;:&#34;مساء|مساءً|م|pm&#34;,&#34;today&#34;:&#34;اليوم&#34;,&#34;tomorrow&#34;:&#34;غدا|غداً|بكرة|غدًا&#34;,&#34;week&#34;:&#34;أسبوع|الأسبوع|اسبوع|أسابيع|اسابيع|أسبوعين&#34;,&#34;yesterday&#34;:&#34;أمس|امس|البارحة&#34;}" data-rst-date-set="تعيين" data-rst-date-hint="جرّب: {example}" data-rst-date-pick="فتح التقويم" data-rst-date-calendar="التقويم" data-rst-date-prev-month="الشهر السابق" data-rst-date-next-month="الشهر التالي" data-rst-date-results="{n} اقتراحات" data-rst-date-result-one="اقتراح واحد" data-rst-date-quick-today="اليوم" data-rst-date-quick-tomorrow="غدًا" data-rst-date-quick-next-week="بعد أسبوع" data-rst-date-quick-plus-1h="بعد ساعة" data-rst-date-quick-plus-2h="بعد ساعتين" data-rst-date-quick-end-of-day="نهاية ذلك اليوم" data-rst-date-quick-next-day="الوقت نفسه في اليوم التالي">
  <small rst-field-error id="dr_to-error">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>