Intl DatepickerWeb Component0.4.2

تقویم آشنای کاربر،
مقدار مشخص برای برنامه.

کاربر تاریخ را در تقویمی که می‌شناسد انتخاب می‌کند. یک وب‌کامپوننت برای انتخاب روز، بازه و بیشتر؛ با رابط چندزبانه و مقداری که برنامه شما می‌تواند استفاده کند.

March 202621Gregorian
فروردین ۱۴۰۵۱شمسی
2026-03-21
npm install intl-datepicker

خود کامپوننت، همین‌جا

تقویم را عوض کنید؛ همان روز را ببینید.

اجرای زنده در مرورگر

در حال بارگذاری تقویم…

یک روز انتخاب کنید. کلیدهای جهت‌نما را هم امتحان کنید.
مقداری که برنامه شما دریافت می‌کند
2026-03-21

با انتخاب روز، متن نمایشی آن را ببینید.

یک تاریخ، بدون ساعت و منطقه زمانی.

برای انتخاب یک روز، value همیشه رشته‌ای به شکل YYYY-MM-DD در تقویم میلادی است. با تغییر تقویم، فقط نمایش روز عوض می‌شود، نه روزی که انتخاب کرده‌اید.

دیدن خروجی getValue()
در انتظار بارگذاری کامپوننت…
کد همین تنظیمات

این نمونه، خود intl-datepicker 0.4.2 است که در مرورگر شما اجرا می‌شود. انتخاب‌های شما به سرور ارسال نمی‌شوند.

از تقویم تا فرم

محدودیت‌ها را به انتخابگر بسپارید.

یک بازه اقامت با شب‌های غیرقابل‌رزرو، حداقل مدت اقامت و مقدار واقعی فرم. فیلد را باز کنید و بازه دیگری انتخاب کنید.

  • مدت اقامت۲ تا ۷ شب
  • محدوده نمونه رزرو۹ مهر تا ۹ آبان ۱۴۰۵
  • شب‌های غیرقابل‌رزرو۲۴ تا ۲۶ مهر

خروج در اولین روز غیرقابل‌رزرو مجاز است. تاریخ‌ها و داده‌های این نمونه ثابت‌اند و رزروی انجام نمی‌شود.

راهنمای محدودیت‌های بازه

چند روز اقامت

فرم نمونه رزرو

در حال بارگذاری فیلد تاریخ…

FormData
با بررسی فرم، مقدار FormData را ببینید.
کد فرم
<form>
  <label for="stay">تاریخ اقامت</label>
  <intl-datepicker id="stay" name="stay"
    type="range" calendar="persian" locale="fa-IR"
    min="2026-10-01" max="2026-10-31"
    min-nights="2" max-nights="7"
    exclude-disabled="nights"
    disabled-dates='["2026-10-16/2026-10-18"]'
    required
  ></intl-datepicker>
  <button type="submit">بررسی انتخاب</button>
</form>

از همان ماژول اصلی، تقویم و ترجمه نمونه اول استفاده می‌کند. صفحه از ارسال فرم جلوگیری می‌کند و مقدار new FormData(form) را می‌خواند.

انتخاب تاریخ با صفحه‌کلید هم ممکن است.

پیمایش با صفحه‌کلید، نام‌گذاری شبکه تقویم و اعلام انتخاب‌ها برای صفحه‌خوان، در خود کامپوننت پیاده شده‌اند.

راهنمای صفحه‌کلید

تقویم و زبان، دو انتخاب جدا هستند.

تقویم، زبان نمایش و شکل ارقام را انتخاب کنید. متن‌های انگلیسی همراه نسخه اصلی‌اند؛ ترجمه‌های فارسی، عربی و عبری جداگانه وارد می‌شوند.

راهنمای چندزبانه‌سازی

یک وب‌کامپوننت

با همان ابزارهای خودتان کار کنید.

عنصر سفارشی را در HTML ساده یا فریم‌ورک خودتان به کار ببرید. با متغیرهای CSS و shadow partها ظاهرش را تنظیم کنید و تقویم‌های اضافی را فقط هنگام نیاز وارد کنید.

دقیقا چه مقداری ذخیره کنم؟

برای یک روز، رشته ISO تاریخ را بدون تبدیل به ساعت ذخیره کنید. بازه شامل شروع و پایان است؛ مقدار ماه و سال در تقویم‌های دیگر ممکن است پسوند تقویم هم داشته باشد. قالب خروجی نوع انتخاب خودتان را در راهنما بخوانید.

قالب مقدارها
آیا در سرور هم نمایش داده می‌شود؟

وارد کردن بسته در محیط SSR ممکن است، اما تقویم در مرورگر نمایش داده می‌شود. در این صفحه، کد نمونه با نزدیک شدن به محدوده دید بارگذاری می‌شود و تقویم‌های اضافی هنگام انتخاب دریافت می‌شوند.

راهی آشنا برای انتخاب تاریخ.

با یک تقویم شروع کنید و گزینه‌های مورد نیاز فرم را اضافه کنید. نسخه 0.4.2 هنوز پیش از ۱.۰ است؛ پیش از ارتقای نسخه فرعی، تغییرات را بخوانید.

عنصر
<intl-datepicker>
مجوز
MIT
نسخه
0.4.2
نیاز به فریم‌ورک
ندارد