مقدارها، رویدادها و API عمومی

import 'intl-datepicker';

const picker = document.querySelector('intl-datepicker');
picker.value = '2026-03-15';
console.log(picker.getValue().calendar); // { year: 2026, month: 3, day: 15 }
picker.setValue('2026-03-20');
console.log(picker.value); // 2026-03-20
picker.clear();
console.log(picker.value, picker.getValue()); // '', null

import 'intl-datepicker';

const picker = document.querySelector('intl-datepicker');
picker.addEventListener('intl-change', ({ detail }) => {
  console.log(detail.value);
  if (detail.type === 'range' && detail.end === null) return;
  // A completed selection or a clear can now update application state.
});
picker.setValue('2026-03-15');

import 'intl-datepicker';
import type { IntlDatepickerElement, SelectDetail } from 'intl-datepicker';

const picker: IntlDatepickerElement = document.createElement('intl-datepicker');
picker.type = 'month';
document.body.append(picker);
picker.addEventListener('intl-change', (event) => {
  const detail: SelectDetail = event.detail;
  if (detail.type === 'month' && detail.calendar) {
    console.log(detail.calendar.month, detail.start, detail.end);
  }
});
picker.setValue('2026-03');

⁅تاریخ بدون ساعت را ذخیره کرد و از رویداد متد و نوع typescript استفاد کرد value رشت است که یک تاریخ یا دوره را نشان داد نه یک لحظه دقیق روی خط زمان برای یک روز 2026 03 15 به همان روز میلادی اشاره داشت مستقل از تقویم نمایشی در مدل داد هم آن ان را به شکل تاریخ بدون ساعت نگه داشت در صورت نیاز دو سر بازه را در دو فیلد تاریخ ذخیره کرد هفته چند روز و دوره دار پسوند تقویم به ساختار متناسب با خود نیاز داشت و همگی در یک ستون sql date جا نگرفت صرفا برای ذخیرهسازی ذخیره سازی تاریخ بدون ساعت را به timestamp تبدیل نکرد اگر برنامه به یک لحظه دقیق نیاز داشت بایست ساعت و منطقه زمانی را مشخص کرد انتخابگر تنظیمی برای ساعت روز یا منطقه زمانی نداشت valueasdate برای راحتی یک date بومی در نیمهشب نیمه شب محلی داد برای انتخاب خالی بازه و چند روز null است برای ماه و سال روز اول دوره را داد برای هفته دوشنبه هفته iso را داد که ممکن است با شروع هفته محلی متفاوت بود برای مرز هفته از rangestart و rangeend استفاد کرد امروز از منطقه زمانی تشخیصدادهشد تشخیص داد شد محیط استفاد کرد که در سطح ماژول نگه داشت شد دکمه امروز بازه نسبی و disable past و disable future به همین منطقه وابست امروز هنگا رندر و تعامل بهروز به روز شد زمانسنجی زمان سنجی برای لحظه نیمهشب نیمه شب وجود نداشت برای مهلت کسبوکار کسب وکار در منطقه زمانی دیگر روز روزه مجاز را در برنامه محاسبه کرد و حد صریح داد مقدار ماه و سال غیرمیلادی از روز اول میلادی دوره و پسوند u ca ساخت شد پسوند calendar را عوض نکرد تقویم متناظر را جداگانه تنظی کرد قالب دوره را دید متن نمایشی با intl ساخت شد و نشانهگذاری نشانه گذاری یا فاصله آن ان ممکن است بین محیط متفاوت بود آن ان را بهعنوان به عنوان قالب ذخیرهسازی ذخیره سازی تجزیه نکرد import intl datepicker const picker document queryselector intl datepicker picker value 2026 03 15 console log picker getvalue calendar year 2026 month 3 day 15 picker setvalue 2026 03 20 console log picker value 2026 03 20 picker clear console log picker value picker getvalue null این نمونه برای انتخابگر پیشفرض پیش فرض روز میلادی است اختصاص value و فراخوانی setvalue از یک تجزیهکن تجزیه کننده استفاد کرد مقدار معتبر به قالب نوع انتخابگر تبدیل شد اختصاص مقدار نامعتبر هشدار داد و انتخاب قبلی را حفظ کرد مقدار اولیه نامعتبر انتخاب را خالی گذاشت انتخاب را پاک کرد در فهرست چند روز ممکن است فقط عضو عضوه نامعتبر حذف شد نه کل فهرست attribute به نام value مقدار را بدون رویداد تنظی کرد و پیشفرض پیش فرض بازنشانی هم هست تغییر property یا متد این attribute را عوض نکرد برای تنظی تنظ که setter عمومی نداشت از setattribute و removeattribute استفاد کرد مثلا picker calendar persian پشتیبانی نشد ویژگی بولی html با حضور فعال است بهج به جای disabled false آن ان را حذف کرد با addeventlistener روی عنصر گوش داد همه رویداد به والد رسید و از مرز shadow dom عبور کرد رویداد داد و زمان ارسال intl select selectdetail پس از انتخاب پذیرفتهشد پذیرفت شد کاربر شامل شروع بازه تایپ امروز و بازه آماد اماد intl change selectdetail پس از انتخاب کاربر و تغییر مقدار با value setvalue یا clear intl navigate navigatedetail وقتی جابهجایی جابه جایی کاربر پنجره ماه قابل مشاهد را تغییر داد intl open intl close پیش از باز یا بست شد پنجره قابل لغو و بدون داد کاربردی اختصاص دوباره همان مقدار رشت با کد intl change نفرستاد انتخاب کاربر یا فعال کرد بازه آماد اماد ممکن است حتی با رشت خروجی یکسان آن ان را فرستاد clear در صورت تغییر رویداد change فرستاد ولی select نفرستاد دکمه پاک کرد هم همین رفتار را داشت مقدار اولیه setattribute value تغییر attribute attributeه تنظی و بازنشانی فرم رویداد change نداشت gotomonth هم navigate نفرستاد import intl datepicker const picker document queryselector intl datepicker picker addeventlistener intl change detail console log detail value if detail type range detail end null return a completed selection or a clear can now update application state picker setvalue 2026 03 15 اگر مقدار قبلی متفاوت بود نمونه 2026 03 15 را چاپ کرد برای لغو باز یا بست شد در رویداد مربوط event preventdefault را فراخوانی کرد بست شد را بیقیدوشرط بی قیدوشرط لغو نکرد در آن ان صورت escape هم پنجره را نبست تقویم درونصفحه درونصفح درون صفحه رویداد باز و بست شد پنجره را نداشت همه گونه selectdetail شامل type value و formatted هستند نوع فیلد دیگر date calendar year month day یا null range week start و end به شکل year month day در تقویم فعال یا null multiple dates آرایه آرای ارایه از year month day در تقویم فعال month calendar year month یا null رشت میلادی iso برای start و end یا null year calendar year یا null رشت میلادی iso برای start و end یا null هنگا پاک کرد رویداد value خالی فیلد تاریخ null یا فهرست dates خالی داشت در مقابل getvalue برای انتخاب خالی null برمیگرد رمید گرداند بازه ناتما شروع داشت و پایان آن ان null است مرز ماه و سال شامل آخر اخر روز هم هستند navigatedetail شامل year و month در تقویم فعال direction با مقدار forward یا backward و مرز میلادی iso به نام start و end برای همه ماه نما است هنگا ایجاد اولیه ارسال نشد ظرفیت اولیه را خود بارگذاری کرد api کاربرد value type name خواند و نوشت مقدار نوع انتخابگر و نام فیلد فرم numerals captionlayout fixedweeks تنظی تنظ نمایشی قابل خواند و نوشت که به attribute متصل labels presets تنظی شیء یا آرایه ارایه زمان اجرا رشت json هم پذیرفت mapdays disableddatesfilter تنظی تابع javascript برای حذف null داد displayvalue متن محلی فقطخواندنی فقط خواندنی calendarvalue calendardate انتخابشد انتخاب شد برای روز ماه و سال در حالت دیگر null rangestart rangeend مرز میلادی iso فقطخواندنی فقط خواندنی برای بازه و هفته در حالت دیگر null selecteddates خواند آرایه ارایه calendardate انتخاب چند روز valueasdate مقدار date بومی با ملاحظ منطقه زمانی بالا getvalue داد ساختاریافت انتخاب یا null setvalue string clear تنظی یا پاک کرد انتخاب open close کنترل پنجره در حالت درونصفحه درونصفح درون صفحه اثری نداشت و باز کرد در حالت disabled مسدود است gotomonth year month نمایش ماه تقویم فعال شماره ماه از 1 شروع شد پس از اتصال عنصر فراخوانی کرد form validity validationmessage willvalidate وضعیت بومی فرم از طریق elementinternals checkvalidity reportvalidity بررسی اعتبار یا بررسی همراه با بازخورد مرورگر gotomonth نما را تغییر داد نه انتخاب را و آرگومان ارگو را به min و max محدود نکرد عدد متناسب با تقویم داد و نمای درخواستی را در محدوده نگه داشت برای تغییر انتخاب شیء شیءه تقویم یا آرایه ارایه برگشتی را دستکاری دست کاری نکرد setvalue را به کار برد import intl datepicker import type intldatepickerelement selectdetail from intl datepicker const picker intldatepickerelement document createelement intl datepicker picker type month document body append picker picker addeventlistener intl change event const detail selectdetail event detail if detail type month detail calendar console log detail calendar month detail start detail end picker setvalue 2026 03 خروجی نمونه 3 2026 03 01 و 2026 03 31 است پیش از دسترسی به فیلد ویژه selectdetail را با type محدود کرد و حالت پاکشد پاک شد را در نظر گرفت ورودی تعریف نوع datepickertype dayofweekname excludedisabledmode dateformat captionlayout هر 6 رابط detail selectdetail navigatedetail dayinfo mapdaysinput mapdaysresult mapdaysfn rangepreset disableddatesfilterfn intldatepickerlabels plurallabel و intldatepickereventmap را صادر کرد نگاشت نام عنصر و رویداد هم گستر داد شد ورودی react نوع intldatepickerprops و intldatepickerref را داشت از intldatepickerelement بهعنوان به عنوان نوع استفاد کرد نه سازنده زمان اجرا ماژول javascript intldatepicker و register را صادر کرد اما تعریف نوع فعلی آن آنها ان را اعلا نکرد همچن setter تایپشد تایپ شد labels و presets فقط شیء و آرایه ارایه پذیرفت هرچند زمان اجرا رشت json هم پذیرفت در typescript از import ثبتکن ثبت کننده و setter شیء یا آرایه ارایه استفاد کرد⁆

⁅مقدار رویداد و api عمومی⁆

⁅مقدار و منطقه زمانیتنظی و خواند مقداررویدادهاساختار داد رویدادproperty و متد عمومیتایپاسکریپت عمومیتایپ اسکریپت⁆