@hamedf/svelte-persian-datepicker
Version:
A comprehensive Svelte 5 Persian/Jalali DateTime picker component with multi-calendar support (Jalali, Gregorian, Hijri), multiple selection modes (single, range, multiple), and extensive customization options
329 lines (328 loc) • 12 kB
JavaScript
import PersianDate from '@alireza-ab/persian-date';
export const Core = {
langs: {
fa: {
calendar: 'jalali',
weekdays: ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'],
months: [
'فروردین',
'اردیبهشت',
'خرداد',
'تیر',
'مرداد',
'شهریور',
'مهر',
'آبان',
'آذر',
'دی',
'بهمن',
'اسفند'
],
dir: {
input: 'rtl',
picker: 'rtl'
},
translations: {
label: 'شمسی',
text: 'تقویم شمسی',
prevMonth: 'ماه قبل',
nextMonth: 'ماه بعد',
now: 'هم اکنون',
submit: 'تایید',
confirm: 'تایید',
cancel: 'لغو',
daysSelected: 'روز انتخاب شده',
selectDates: 'انتخاب تاریخ',
/* use in shourcuts */
// date-single
yesterday: 'دیروز',
tomorrow: 'فردا',
firstOfWeek: 'اول هفته',
lastOfWeek: 'آخر هفته',
// date-range
thisWeek: 'این هفته',
prevWeek: 'هفته قبل',
nextWeek: 'هفته بعد',
thisMonth: 'این ماه',
// time-single
oneHourAgo: 'یک ساعت قبل',
oneHourLater: 'یک ساعت بعد',
midnight: 'نیمه شب',
midday: 'نیمروز',
// time-range
thisHour: 'این ساعت',
prevHour: 'ساعت قبل',
nextHour: 'ساعت بعد',
allDay: 'تمام روز'
},
inputFormat: '',
displayFormat: ''
},
en: {
calendar: 'gregorian',
weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
dir: {
input: 'ltr',
picker: 'ltr'
},
translations: {
label: 'میلادی',
text: 'Gregorian Calendar',
prevMonth: 'Previous Month',
nextMonth: 'Next Month',
now: 'Now',
submit: 'Submit',
confirm: 'Confirm',
cancel: 'Cancel',
daysSelected: 'days selected',
selectDates: 'Select dates',
/* use in shourcuts */
// date-single
yesterday: 'Yesterday',
tomorrow: 'Tomorrow',
firstOfWeek: 'First of Week',
lastOfWeek: 'Last of Week',
// date-range
thisWeek: 'This Week',
prevWeek: 'Previous Week',
nextWeek: 'Next Week',
thisMonth: 'This Month',
// time-single
oneHourAgo: 'One Hour ago',
oneHourLater: 'One Hour later',
midnight: 'Midnight',
midday: 'Midday',
// time-range
thisHour: 'This Hour',
prevHour: 'Previous Hour',
nextHour: 'Next Hour',
allDay: 'All Day'
},
inputFormat: '',
displayFormat: ''
},
ar: {
calendar: 'jalali', // Use jalali calendar but with Hijri months/translations
weekdays: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
months: [
'محرم',
'صفر',
'ربيع الأول',
'ربيع الثاني',
'جمادى الأولى',
'جمادى الثانية',
'رجب',
'شعبان',
'رمضان',
'شوال',
'ذو القعدة',
'ذو الحجة'
],
dir: {
input: 'rtl',
picker: 'rtl'
},
translations: {
label: 'هجري',
text: 'التقويم الهجري',
prevMonth: 'الشهر السابق',
nextMonth: 'الشهر التالي',
now: 'الآن',
submit: 'تأكيد',
confirm: 'تأكيد',
cancel: 'إلغاء',
daysSelected: 'أيام محددة',
selectDates: 'اختر التواريخ',
/* use in shortcuts */
// date-single
yesterday: 'أمس',
tomorrow: 'غدا',
firstOfWeek: 'أول الأسبوع',
lastOfWeek: 'آخر الأسبوع',
// date-range
thisWeek: 'هذا الأسبوع',
prevWeek: 'الأسبوع السابق',
nextWeek: 'الأسبوع القادم',
thisMonth: 'هذا الشهر',
// time-single
oneHourAgo: 'قبل ساعة',
oneHourLater: 'بعد ساعة',
midnight: 'منتصف الليل',
midday: 'منتصف النهار',
// time-range
thisHour: 'هذه الساعة',
prevHour: 'الساعة السابقة',
nextHour: 'الساعة القادمة',
allDay: 'طوال اليوم'
},
inputFormat: '',
displayFormat: ''
}
},
mergeObject: function (original, changed) {
const newObject = JSON.parse(JSON.stringify(original));
for (const key in changed) {
if (original[key] && Object.prototype.toString.call(changed[key]) === '[object Object]')
newObject[key] = this.mergeObject(original[key], changed[key]);
else
newObject[key] = changed[key];
}
return newObject;
},
setStyles: function (styles, root) {
for (const name in styles) {
root.style.setProperty('--' + name, styles[name]);
}
},
setColor: function (color, root) {
if (!color)
return;
let colors = {};
switch (color) {
case 'blue':
colors = {
'primary-color': '#3b82f6',
'secondary-color': '#93c5fd',
'in-range-background': '#dbeafe'
};
break;
case 'primary':
colors = {
'primary-color': '#6366f1',
'secondary-color': '#a5b4fc',
'in-range-background': '#e0e7ff'
};
break;
case 'red':
colors = {
'primary-color': '#ef4444',
'secondary-color': '#fca5a5',
'in-range-background': '#fee2e2'
};
break;
case 'pink':
colors = {
'primary-color': '#ec4899',
'secondary-color': '#f9a8d4',
'in-range-background': '#fce7f3'
};
break;
case 'orange':
colors = {
'primary-color': '#f97316',
'secondary-color': '#fdba74',
'in-range-background': '#ffedd5'
};
break;
case 'green':
colors = {
'primary-color': '#22c55e',
'secondary-color': '#86efac',
'in-range-background': '#dcfce7'
};
break;
case 'purple':
colors = {
'primary-color': '#a855f7',
'secondary-color': '#d8b4fe',
'in-range-background': '#f3e8ff'
};
break;
case 'gray':
colors = {
'primary-color': '#6b7280',
'secondary-color': '#d1d5db',
'in-range-background': '#f3f4f6'
};
break;
default:
break;
}
this.setStyles(colors, root);
},
getLastUnit: function (date, type) {
const unitsCount = date.split(/[/ \-.,:\\]/).length + (type == 'time' ? 3 : 0);
switch (unitsCount) {
case 1:
return 'year';
case 2:
return 'month';
case 3:
return 'date';
case 4:
return 'hour';
case 5:
return 'minute';
case 6:
return 'second';
default:
return 'millisecond';
}
},
getShortcuts(date, part, translate) {
const c = () => date.clone();
switch (part) {
case 'date-single':
return {
[translate.now]: [c()],
[translate.yesterday]: [c().subDay()],
[translate.tomorrow]: [c().addDay()],
[translate.firstOfWeek]: [c().startOf('week')],
[translate.lastOfWeek]: [c().endOf('week')]
};
case 'date-range':
return {
[translate.thisWeek]: [c().startOf('week'), c().endOf('week')],
[translate.prevWeek]: [c().subWeek().startOf('week'), c().subWeek().endOf('week')],
[translate.nextWeek]: [c().addWeek().startOf('week'), c().addWeek().endOf('week')],
[translate.thisMonth]: [c().startOf('month'), c().endOf('month')],
[translate.prevMonth]: [c().subMonth().startOf('month'), c().subMonth().endOf('month')],
[translate.nextMonth]: [c().addMonth().startOf('month'), c().addMonth().endOf('month')]
};
case 'time-single':
return {
[translate.now]: [c()],
[translate.oneHourAgo]: [c().subHour()],
[translate.oneHourLater]: [c().addHour()],
[translate.midnight]: [c().startOf('date')],
[translate.midday]: [c().time(12)]
};
case 'time-range':
return {
[translate.thisHour]: [c().startOf('hour'), c().endOf('hour')],
[translate.prevHour]: [c().subHour().startOf('hour'), c().subHour().endOf('hour')],
[translate.nextHour]: [c().addHour().startOf('hour'), c().addHour().endOf('hour')],
[translate.allDay]: [c().startOf('date'), c().endOf('date')]
};
default:
return {};
}
},
isString: function (val) {
return typeof val == 'string';
},
isNumber: function (val) {
return typeof val == 'number';
},
isFunction: function (val) {
return typeof val == 'function';
},
isPersianDate: function (val) {
return PersianDate.isPersianDate(val);
}
};
export { PersianDate };