تنظیم ظاهر و محتوای روزها

intl-datepicker {
  --idp-primary: #075985;
  --idp-selected-bg: #075985;
  --idp-selected-text: #ffffff;
  --idp-radius: 12px;
  --idp-day-size: 44px;
  --idp-font-family: inherit;
}

intl-datepicker::part(calendar) {
  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
}
intl-datepicker::part(day) { border-radius: 50%; }
intl-datepicker::part(input-wrapper) { border-width: 2px; }

import 'intl-datepicker';

const picker = document.querySelector('intl-datepicker');
picker.setValue('2026-03-15');
picker.mapDays = ({ date, isCheckoutOnly, isRangeBlocked }) => {
  if (isCheckoutOnly) return { title: 'فقط خروج' };
  if (isRangeBlocked) return { style: 'text-decoration: line-through' };
  if (date.iso === '2026-03-20') {
    return { content: ' •', title: 'نرخ ویژه', style: 'font-weight: 700' };
  }
  return null;
};

⁅ظاهر انتخابگر را با متغیر متغیره css بخش عمومی سایه و تزی روز تغییر داد سبک داخل ریشه سایه کامپوننت قرار داشت متغیر متغیره عمومی را روی عنصر میزبان تنظی کرد intl datepicker idp primary 075985 idp selected bg 075985 idp selected text ffffff idp radius 12px idp day size 44px idp font family inherit متغیر پیشفرض پیش فرض idp primary 2563eb idp bg ffffff idp text 1f2937 idp border d1d5db idp hover f3f4f6 idp selected bg var idp primary idp selected text ffffff idp today border var idp primary idp disabled 9ca3af idp range bg dbeafe idp range text var idp text idp muted 6b7280 idp error dc2626 idp radius 8px idp day size 40px حداقل اندازه هدف روز 24 پیکسل است idp font size 14px idp font family system ui apple system sans serif idp z index 1000 برای پنجره جایگزین idp input min width 200px idp calendar min width 300px تنظی داخلی حالت تاریک رنگ پسزمینه پس زمینه متن کادر اشاره پسزمینه پس زمینه بازه و متن کمرنگ کم رنگ را تغییر داد اگر برنامه کلید تغییر پوسته داشت این متغیر را برای هر پوسته با هم تنظی کرد سبک رنگ اجباری و کاه حرکت هم وجود داشت هنگا بازنویسی کادر فوکوس و تضاد خوانا را حفظ کرد intl datepicker part calendar box shadow 0 8px 24px rgb 0 0 0 15 intl datepicker part day border radius 50 intl datepicker part input wrapper border width 2px بخش عنصر input wrapper input ظرف ورودی و ورودی داخلی hint error راهنمای قالب تایپ و خطا calendar پنل تقویم header header title سربرگ جابهجایی جابه جایی و ناحیه عنوان nav prev nav next دکمه جابهجایی جابه جایی month dropdown year dropdown فهرست بازشو ماه و سال weekday day عنوان روز هفته و دکمه روز month cell year cell دکمه نمای ماه و سال footer today btn clear btn بخش پای تقویم و دکمه آن ان alternate خط تاریخ معادل میلادی presets ظرف بازه آماد اماد range hint راهنمای طول بازه در حال انتخاب clear btn دکمه پاک کرد پای تقویم را هدف گرفت نه دکمه کوچک کنار ورودی بخش امکان انتخاب هر فرزند داخلی یا کلاس وضعیت را نداد قانون سراسری idp day از مرز سایه عبور نکرد کلاس داخلی جزیی پیادهسازی پیاد سازی و قرارداد عمومی ظاهر نبود inline تقویم را در صفحه نگه داشت و پنجره باز نکرد ورودی همچن جزیی از کامپوننت است months 1 تا 3 تعداد پنل روز را مشخص کرد مقدار به این محدوده محدود شد fixed weeks شش ردیف ساخت و hide outside days روز روزه ماه مجاور را پنه کرد show week numbers شماره هفته محلی را اضافه کرد caption layout بهطور به طور پیشفرض پیش فرض button است و گزینه dropdown dropdown months و dropdown years هم داشت فهرست بازشو برای نمای روز تکپنلی تک پنلی هستند چند پنل عنوان ثابت ماه داشت show alternate وقتی یک روز انتخابشد انتخاب شد وجود داشت معادل میلادی آن ان را نشان داد روز مبن ماه و سال را هم شامل شد خلاصه معادل برای بازه هفته یا چند روز تولید نکرد no animation پویانمایی پنجره را خامو کرد تنظی کاه حرکت کاربر هم رعایت شد popover پنجره را در لایه بالایی مرورگر گذاشت idp z index فقط برای حالت جایگزین با موقعیت ثابت کاربرد داشت و در آن ان حالت برش محتوا یا والد دار تبدیل را اصلاح نکرد در صورت نیاز از ظرف بدون برش یا inline استفاد کرد import intl datepicker const picker document queryselector intl datepicker picker setvalue 2026 03 15 picker mapdays date ischeckoutonly israngeblocked if ischeckoutonly return title فقط خروج if israngeblocked return style text decoration line through if date iso 2026 03 20 return content title نرخ ویژه style font weight 700 return null این نمونه بدون تغییر انتخاب 20 مارس را علامت زد date شامل سال ماه و روز تقویم فعال iso میلادی و dayofweek با شروع شمارهگذاری شماره گذاری از یکشنبه است پرچم دیگر istoday isselected isdisabled isinrange israngestart israngeend و iscurrentmonth هستند isdisabled قاعده عادی روز را نشان داد و israngeblocked درباره پایان غیرمجاز بازه در انتظار است توانست classname سبک درونخطی درون خطی style محتو افزود content title disabled یا hidden برگردانی content بهعنوان به عنوان html درج شد فقط محتو قابل اعتماد برنامه را داد و متن پاکسازینشد پاک سازی نشد کاربر یا api را وارید نکرد کلاس سفارشی داخل ریشه سایه است و انتخابگر معمولی کلاس بیرونی به آن ان نرسید برای تزی هر روز style برگشتی را به کار برد disabled true همان سلول نمایشی را مسدود کرد اما قاعده ظرفیت کسبوکار کسب وکار اضافه نکرد hidden true محتو سلول را حذف کرد هیچکد هیچکدا هیچ کدا جایگزین محدودیت ظرفیت نبود تابع را همگا نگه داشت و پس از تغییر داد تزی تابع تازه تاز اختصاص داد⁆

⁅تنظی ظاهر و محتو روز⁆

⁅متغیر متغیره cssبخ cssبخش عمومی سایهگزینه چیدمانتغییر محتو روز با mapdays⁆