نمونه‌های کاربردی و رفع اشکال

<label for="period">ماه گزارش</label>
<intl-datepicker id="period" type="month" name="period"
  calendar="persian" locale="fa-IR"
  value="2024-07-22[u-ca=persian]"></intl-datepicker>
<output id="period-bounds"></output>

import 'intl-datepicker/calendars/persian';
import 'intl-datepicker/labels/fa';
import 'intl-datepicker';

const picker = document.querySelector('intl-datepicker');
const output = document.querySelector('#period-bounds');
function showPeriod(detail) {
  if (!detail || detail.type !== 'month' || !detail.calendar) {
    output.textContent = '';
    return;
  }
  const key = `${detail.calendar.year}-${detail.calendar.month}`;
  output.textContent = `${key}: ${detail.start} / ${detail.end}`;
}
showPeriod(picker.getValue());
picker.addEventListener('intl-change', ({ detail }) => showPeriod(detail));

import 'intl-datepicker';

const picker = document.querySelector('#stay');
const booked = new Set();
let request;
async function loadAvailability(start, end) {
  request?.abort();
  const current = new AbortController();
  request = current;
  try {
    const query = new URLSearchParams({ from: start, to: end });
    const response = await fetch(`/api/booked-nights?${query}`, {
      signal: current.signal,
    });
    if (!response.ok) throw new Error(`Availability: ${response.status}`);
    const dates = await response.json();
    if (request !== current) return;
    if (!Array.isArray(dates) || dates.some((d) => typeof d !== 'string')) {
      throw new Error('Expected an array of ISO date strings');
    }
    for (const iso of booked) {
      if (iso >= start && iso <= end) booked.delete(iso);
    }
    for (const iso of dates) booked.add(iso);
    picker.disabledDatesFilter = ({ iso }) => booked.has(iso);
  } catch (error) {
    if (error.name !== 'AbortError') console.error(error);
  }
}
picker.addEventListener('intl-navigate', ({ detail }) => {
  loadAvailability(detail.start, detail.end);
});
loadAvailability('2026-03-01', '2026-04-30');

<intl-datepicker type="range" locale="en-US" name="leave"
  disabled-days-of-week="sat,sun"
  disabled-dates='["2026-03-17"]'
  value="2026-03-13/2026-03-18"></intl-datepicker>

⁅گزارش ماهانه و دریافت ظرفیت را پیاد کرد و مشکل رایج تنظی را برطرف کرد وقتی گزارش یک ماه تقویمی را پوشش داد از انتخابگر ماه استفاد کرد ماژول مرورگر زیر با html همراه آن ان کار کرد label for period ماه گزارش label intl datepicker id period type month name period calendar persian locale fa ir value 2024 07 22 u ca persian intl datepicker output id period bounds output import intl datepicker calendars persian import intl datepicker labels fa import intl datepicker const picker document queryselector intl datepicker const output document queryselector period bounds function showperiod detail if detail detail type month detail calendar output textcontent return const key detail calendar year detail calendar month output textcontent key detail start detail end showperiod picker getvalue picker addeventlistener intl change detail showperiod detail خروجی اولیه 1403 5 2024 07 22 2024 08 21 است برای پرسوجو پرس وجو روی ستون تاریخ start و end مرز میلادی شامل دو سر بازه اگر api شما پایان را خارج از بازه حساب کرد آن ان مرز را در بخش مدیریت تاریخ برنامه تبدیل کرد مقدار ارسالی period همچن 2024 07 22 u ca persian است نمونه پاک شد انتخاب را بدون دسترسی به شیء calendar خالی مدیریت کرد در نمونه رزرو پنجره نما مارس و آوریل اوریل 2026 است کد زیر فرض کرد سرویس برنامه شما برای پنجره درخواستی آرایه ارایه json از شب شبه رزروشد میلادی iso برمیگرد رمید گرداند import intl datepicker const picker document queryselector stay const booked new set let request async function loadavailability start end request abort const current new abortcontroller request current try const query new urlsearchparams from start to end const response await fetch api booked nights query signal current signal if response ok throw new error availability response status const dates await response json if request current return if array isarray dates dates some d typeof d string throw new error expected an array of iso date strings for const iso of booked if iso start iso end booked delete iso for const iso of dates booked add iso picker disableddatesfilter iso booked has iso catch error if error name aborterror console error error picker addeventlistener intl navigate detail loadavailability detail start detail end loadavailability 2026 03 01 2026 04 30 اگر پاسخ شامل 2026 03 20 بود آن ان شب غیرقابل انتخاب شد اختصاص فیلتر نما را بهروز به روز کرد و شروع در انتظار را نگه داشت این قرارداد سرویس برنامه شماست و api آماد اماد از طرف بست نیست معتبر بود خود تاریخ پاسخ را بررسی کرد وضعیت بارگذاری و خطا را نشان داد و تا وقتی ظرفیت لاز معلو نیست ارسال را متوقف کرد هنگا حذف نما درخواست جاری را لغو کرد نمونه پنجره بارگذاریشد بارگذاری شد را نگه داشت و تاریخ داخل پنجره تازهشد تازه شد را جایگزین کرد برای اقامتی که از پنجره دیگر هم عبور کرد ظرفیت کل اقامت لاز است سرور بایست موجودی را دوباره بررسی کرد سلول غیرفعال تقویم قفل رزرو نیست disabled dates ثابت نمونه رزرو نیز در کنار فیلتر عمل شد ماژول اصلی را وارید کرد وقتی درخواست توانست آخر اخر هفته را در بر گرفت ولی شروع و پایان آن ان بایست روز مجاز بود exclude disabled را نگذاشت intl datepicker type range locale en us name leave disabled days of week sat sun disabled dates 2026 03 17 value 2026 03 13 2026 03 18 intl datepicker بازه اولیه با وجود آخر اخر هفته و 17 مارس در میانه آن ان معتبر است خروجی 2026 03 13 2026 03 18 خواست بود اگر همه روز بایست مجاز بود exclude disabled days اضافه کرد همان مقدار دید شد اما اعتبارسنجی را رد کرد نشانه بررسی لاز زبان فارسی ولی تقویم میلادی calendars persian را وارید کرد و calendar persian گذاشت نام ماه فارسی ولی دکمه انگلیسی پیش از ساخت عنصر labels fa را وارید کرد هشدار تقویم ناشناخته نگاشت ماژول در نصب را دید گونه ماژول مشترک داشت شکست import نام بست در html ابزار ساخت import map یا نمونه cdn مستندشد لاز است مقدار جدید ناد گرفت شد قالب را با نوع تطبیق داد ماه و سال غیرمیلادی روز iso خواست نه سال و ماه کوتاه بومی تغییر روز پس از ذخیره مقدار بدون ساعت را نگه داشت و تبدیل timestamp خارج از انتخابگر را بررسی کرد نبود فیلد در formdata name مقدار خالی disabled و fieldset و پشتیبانی elementinternals را بررسی کرد نبود رویداد پس از تغییر attribute تغییر attribute بدون رویداد است برای رویداد تغییر مقدار از value یا setvalue استفاد کرد رد شد بازه کامل تایپشد تایپ شد هر بار یک روز در تقویم فعال وارید کرد بیاثر بی اثر بود سبک کلاس داخلی متغیر css بخش عمومی یا سبک درونخطی درون خطی mapdays به کار برد برید شد تقویم بدون popover از والد دار تبدیل یا برش دوری کرد یا inline گذاشت بیاثر بی اثر بود property جاوااسکریپت فقط setter setterه عمومی کار کرد برای بقیه تنظی تنظ attribute گذاشت attribute با json خراب ناد گرفت شد ویژگی بولی مانند required disabled و allow input با حضور فعال حتی اگر متن false داشت بود برای اعتبارسنجی داد نامطم سرور به تجزیهکن تجزیه کننده تکیه نکرد مثلا هفته 53 با تعداد واقعی هفته آن ان سال تطبیق داد نشد و بخش اضافه بعد از ممیز دوم در مقدار بازه ناد گرفت شد رعایت readonly در تقویم درونصفحه درونصفح درون صفحه محرک خارجی for و فراخوانی مستقی open کامل نیست کنترل انتخاب توانست قابل استفاد ماند اگر نمایش فقطخواندنی فقط خواندنی لاز داشت یک مقدار قالببندیشد قالب بندی شد ثابت نشان داد disabled روی تعامل و ارسال بومی فرم اثر دیگری داشت و جایگزین هممعنی هم معنی فیلد فقطخواندنی فقط خواندنی ارسالی نیست ورودی خارجی و slot به مدیریت وضعیت و دسترسپذیری دسترس پذیری در برنامه نیاز داشت مگر برای نیاز مشخص به محرک سفارشی ورودی داخلی را ترجیح داد همگامسازی همگا سازی متن اولیه خارجی و رفتار allow input در راهنمای فرم آمد امد است در آزمون ازمون خودکار زبان و تاریخ را صریح تعی کرد مقدار پاکشد پاک شد مقدار نامعتبر حفظشد حفظ شد بازه ناقص بازنشانی فرم و تغییر تقویم را بررسی کرد آزمون ازمون بومی فرم و فوکوس را در مرورگر واقعی اجرا کرد شبیهساز شبیه ساز dom همه رفتار رفتاره elementinternals و پنجره را بازسازی نکرد نمونه چارچوب الگوی اتصال نه جدول جامع سازگاری⁆

⁅نمونه کاربردی و رفع شکل⁆

⁅ماه شمسی برای گزارشبهروزرسانی گزارشبه روزرسانی ظرفیتمرخصی شامل آخر اخر هفتهمشکل رایج تنظیمفقطخواندنی تنظیمفقط خواندنی بود و ورودی سفارشیبررسی در برنامه خود⁆