نمونه‌هایی از نحوه استفاده از محدودیت‌های بازه زمانی و غیرفعال کردن تاریخ‌ها در کامپوننت انتخاب تاریخ.
اکنون می‌توانید توابع غیرفعال‌سازی تاریخ‌ها را به سه روش مختلف استفاده کنید:
این بهبود امکان استفاده از توابع غیرفعال‌سازی را در هر محیطی، از جمله در کتابخانه‌های React، Vue و Angular، فراهم می‌کند.
<persian-datepicker-element
id="range-picker"
min-date="[1403,1,1]"
max-date="[1403,12,29]"
></persian-datepicker-element>// تعریف تابع تاریخ‌های غیرفعال
function isWeekend(year, month, day) {
const date = new Date(year, month - 1, day);
const dayOfWeek = date.getDay();
return dayOfWeek === 5 || dayOfWeek === 6; // غیرفعال کردن روزهای جمعه و شنبه (آخر هفته در تقویم ایرانی)
}
<persian-datepicker-element
id="disabled-picker"
disabled-dates="isWeekend"
></persian-datepicker-element><persian-datepicker-element
id="combined-picker"
min-date="[1403,1,1]"
max-date="[1403,12,29]"
disabled-dates="isWeekend"
></persian-datepicker-element>// استفاده مستقیم از متد setDisabledDatesFn بدون نیاز به تعریف تابع در سطح جهانی
const picker = document.getElementById('local-function-picker');
// تعریف تابع به صورت مستقیم و محلی
const isEvenDay = function(year, month, day) {
return day % 2 === 0; // غیرفعال کردن روزهای زوج
};
// اعمال تابع غیرفعال‌سازی به تقویم
picker.setDisabledDatesFn(isEvenDay);// تعریف متد مستقیماً روی المان
const methodPicker = document.getElementById('element-method-picker');
// افزودن متد دلخواه مستقیماً به المان
methodPicker.isWorkingDay = function(year, month, day) {
const date = new Date(year, month - 1, day);
const dayOfWeek = date.getDay();
// غیرفعال کردن تعطیلات آخر هفته (جمعه = 5، شنبه = 6)
// و همچنین روزهای 13 ماه (به عنوان مثال)
return dayOfWeek === 5 || dayOfWeek === 6 || day === 13;
};
// استفاده از متد تعریف شده روی المان
methodPicker.setAttribute('disabled-dates', 'isWorkingDay');