सामग्री पर जाएँ
मेनू
भाषा, अभी हिन्दी
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo डिज़ाइन सिस्टम

डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: plain। भाषा: हिन्दी

दिनांक और समय

datetime.js जिन चार फ़ील्ड को बेहतर बनाता है, हर एक अपने नीचे मूल इनपुट रखता है, ताकि बिना स्क्रिप्ट वाले पाठक को सादा नियंत्रण मिले, टूटा हुआ नहीं।

पहले से बने, आपस में एक जैसे UI तत्व, जो सर्वर पर रेंडर होते हैं।

फ़्रेमवर्क की अपनी शब्दावली इन्हें partial कहती है: ui.Templates() partial लौटाता है, और 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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 अलग होने चाहिए, क्योंकि ids उन्हीं से बनते हैं।

तारीख़ और समय, पहले से भरे हुए

पूर्वावलोकन
<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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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="1 सुझाव" 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>