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

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

كل مثال يعمل فعلًا، لكن روابطه لا تؤدي إلى أي مكان. يعرض HTML الترميز الجاهز للنسخ.

field-date

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

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_live">تاريخ النشر</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">اليوم الذي يُنشر فيه.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "تاريخ النشر"
    "Value" "2026-09-04"
    "Hint" "اليوم الذي يُنشر فيه."}}

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

مطلوب، مع خطأ

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_error">تاريخ النشر <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">اختر تاريخًا بعد اليوم.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "تاريخ النشر"
    "Required" true
    "Error" "اختر تاريخًا بعد اليوم."}}

بحدّين

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_bounded">خلال هذا العام</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>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "خلال هذا العام"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_plain">تاريخ النشر</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_plain"
    "Label" "تاريخ النشر"
    "Value" "2026-09-04"
    "Plain" true}}

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

field-time

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

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_live">فتح الأبواب</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">بالتوقيت المحلي.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_live"
    "Label" "فتح الأبواب"
    "Value" "19:30"
    "Hint" "بالتوقيت المحلي."}}

مطلوب، مع خطأ

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_error">فتح الأبواب <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">اختر وقتًا بعد اختبار الصوت.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "فتح الأبواب"
    "Required" true
    "Error" "اختر وقتًا بعد اختبار الصوت."}}

بحدّين

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_bounded">بين التاسعة والحادية عشرة</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>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "بين التاسعة والحادية عشرة"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_plain">فتح الأبواب</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "فتح الأبواب"
    "Value" "19:30"
    "Plain" true}}

field-datetime

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

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_live">تاريخ النشر</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">موعد نشره.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "تاريخ النشر"
    "Value" "2026-09-04T19:30"
    "Hint" "موعد نشره."}}

مطلوب، مع خطأ

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_error">تاريخ النشر <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">اختر تاريخًا بعد اليوم.</small>
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "تاريخ النشر"
    "Required" true
    "Error" "اختر تاريخًا بعد اليوم."}}

بحدّين

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">خلال هذا العام</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>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_bounded"
    "Label" "خلال هذا العام"
    "Value" "2026-09-04T19:30"
    "Min" "2026-01-01T00:00"
    "Max" "2026-12-31T23:59"}}

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_plain">تاريخ النشر</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_plain"
    "Label" "تاريخ النشر"
    "Value" "2026-09-04T19:30"
    "Plain" true}}

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

field-daterange

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

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>الموعد</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">يبدأ</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">ينتهي</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>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "الموعد"
    "Seed" "session"
    "Start" (dict "Label" "يبدأ" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "ينتهي" "Name" "dr_ends_at")}}

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

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

سطح المكتب الهاتف HTML القالب

ضع هذا داخل <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>الحجز</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
      <label rst-field-label for="dr_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">إلى</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">النهاية تسبق البداية.</small>
    </div>
  </div>
</fieldset>

ضع هذا داخل <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "الحجز"
    "Kind" "date"
    "Start" (dict "Label" "من" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "النهاية تسبق البداية." "Label" "إلى" "Name" "dr_to" "Value" "2026-09-01")}}