মূল বিষয়ে যান
বিভাগসমূহ
ভাষা, এখন বাংলা
Rastrillo ডিজাইন সিস্টেম

তারিখ ও সময়

datetime.js যে চারটি ফিল্ড উন্নত করে, প্রতিটির নিচে থাকে তার নিজস্ব নেটিভ ইনপুট, যাতে স্ক্রিপ্ট ছাড়া পাঠক সাদামাটা নিয়ন্ত্রণটি পান, ভাঙা কিছু নয়।

প্রতিটি উদাহরণ সত্যিই চলে, কিন্তু এর লিংকগুলো কোথাও নিয়ে যায় না। HTML কপি করার জন্য মার্কআপ দেখায়।

field-date

একটি নেটিভ তারিখ ইনপুট, সঙ্গে datetime.js যে স্বাভাবিক-ভাষার কম্বোবক্স চালু করে — যদি না ডাকার সময় Plain দেওয়া হয়। এতে "আগামীকাল" লিখে দেখুন।

উন্নত ইনপুট: লিখুন "আগামীকাল" বা "৩ সপ্তাহ পরে"

প্রিভিউ

এটি <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 দিয়ে বেরিয়ে যায়, এই পাতার ক্যাটালগ থেকে মেলানো: ফিল্ডটি সেই ভাষাই পড়ে যে ভাষায় পাতাটি আছে।

আবশ্যিক, একটি ত্রুটিসহ

প্রিভিউ

এটি <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" "আজকের পরের একটি তারিখ বেছে নিন।"}}

সীমা বেঁধে দেওয়া

প্রিভিউ

এটি <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: নিছক নেটিভ ইনপুট

প্রিভিউ

এটি <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

একই মোড়ক, এবার নেটিভ সময় ইনপুটের চারপাশে। এই উন্নতিটি ক্যালেন্ডার নয়, ঘড়ি পড়ে।

উন্নত ইনপুট: লিখুন "সাড়ে সাতটা" বা "দুপুর"

প্রিভিউ

এটি <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" "স্থানীয় সময়।"}}

আবশ্যিক, একটি ত্রুটিসহ

প্রিভিউ

এটি <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" "সাউন্ড চেকের পরের একটি সময় বেছে নিন।"}}

সীমা বেঁধে দেওয়া

প্রিভিউ

এটি <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: নিছক নেটিভ ইনপুট

প্রিভিউ

এটি <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

একটিই ইনপুটে তারিখ আর সময়, একটিই মান।

উন্নত ইনপুট: লিখুন "আগামীকাল" বা "৩ সপ্তাহ পরে"

প্রিভিউ

এটি <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" "যখন এটি চালু হবে।"}}

যে শব্দগুলো এটি পড়ে, সেগুলো data-rst-date-words দিয়ে বেরিয়ে যায়, এই পাতার ক্যাটালগ থেকে মেলানো: ফিল্ডটি সেই ভাষাই পড়ে যে ভাষায় পাতাটি আছে।

আবশ্যিক, একটি ত্রুটিসহ

প্রিভিউ

এটি <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" "আজকের পরের একটি তারিখ বেছে নিন।"}}

সীমা বেঁধে দেওয়া

প্রিভিউ

এটি <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: নিছক নেটিভ ইনপুট

প্রিভিউ

এটি <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 আলাদা হতে হবে, কারণ id সেখান থেকেই তৈরি হয়।

তারিখ ও সময়, আগে থেকে ভরা

প্রিভিউ

এটি <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")}}

শেষ ফাঁকা রেখেই শুরুটা ঠিক করুন, ব্রাউজার শেষটিকে এক ঘণ্টা পরের সময় দিয়ে ভরে দেবে। সার্ভার থেকে কিছুই আগে থেকে বসানো হয় না।

শুধু তারিখ, শেষের দিকে একটি ত্রুটিসহ

প্রিভিউ

এটি <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")}}