🔧 Fix jQuery Calendars Library Loading Error - إصلاح خطأ تحميل مكتبة التقويم

🔧 Fix jQuery Calendars Library Loading Error

- Fix library loading order in manifest with proper prepend directives
- Add safety checks for $.calendars availability before usage
- Add try-catch blocks for error handling during initialization
- Separate Hijri calendar initialization into its own method
- Remove duplicate jquery.plugin.js file that was causing conflicts
- Add fallback behavior when library fails to load (hide Hijri field)
- Add console warnings for debugging library loading issues
- Ensure Gregorian datepicker works even if Hijri library fails
- Proper loading sequence: CSS → Libraries → Custom JS

 Complete fix for jQuery Calendars loading error
This commit is contained in:
Mohamed Eltayar 2025-08-29 01:17:56 +03:00 committed by GitHub
parent 18bf6b4d46
commit c4d0ad051f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 134 additions and 73 deletions

View File

@ -55,20 +55,30 @@ This module automatically adds Hijri date picker functionality below every stand
],
'assets': {
'web.assets_backend': [
# ✅ CSS files first
'web_hijri_datepicker/static/src/scss/hijri_modern.css',
'web_hijri_datepicker/static/src/scss/web_hijri_date.scss',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.plugin.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.all.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.plus.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.picker.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic-ar.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic-fa.js',
# ✅ jQuery Plugin base - only once
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.plugin.js'),
# ✅ jQuery Calendars core libraries in correct order
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.js'),
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.all.js'),
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.plus.js'),
# ✅ Islamic calendar specific files
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic.js'),
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic-ar.js'),
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic-fa.js'),
# ✅ Picker functionality
('prepend', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.picker.js'),
# ✅ Time entry files (optional - only CSS needed)
'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.timeentry.css',
'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.plugin.js',
'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.timeentry.js',
'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.timeentry-ar.js',
# ✅ Our custom JavaScript LAST to ensure libraries are loaded
'web_hijri_datepicker/static/src/js/web_hijri_date.js',
],
},
@ -97,4 +107,4 @@ This module automatically adds Hijri date picker functionality below every stand
'live_test_url': 'https://demo.yourcompany.com',
'demo': [],
'test': [],
}
}

View File

@ -42,40 +42,16 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
this.$input.attr('placeholder', 'التاريخ الميلادي');
}
// Enhanced click handler with better UX
this.$input_hijri.click(function (e) {
e.preventDefault();
e.stopPropagation();
self.$input_hijri.calendarsPicker('show');
});
// ✅ Modern configuration with enhanced features and fixed navigation
this.$input_hijri.calendarsPicker({
calendar: $.calendars.instance('islamic', this.options.locale || 'ar'),
dateFormat: 'M d, yyyy',
showAnim: 'slideDown',
showSpeed: 'fast',
showOnFocus: false,
closeOnDateSelect: true,
yearRange: 'c-100:c+50',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
localNumbers: true,
renderer: this._getModernRenderer(),
onSelect: this._convertDateToHijri.bind(this),
onShow: function() {
// Add modern CSS class for styling
$('.calendars-popup').addClass('hijri-modern-popup');
// ✅ إصلاح أزرار التنقل بعد ظهور التقويم
setTimeout(function() {
$('.calendars-prev').html('').attr('title', 'الشهر السابق');
$('.calendars-next').html('').attr('title', 'الشهر التالي');
}, 10);
// ✅ فحص توفر مكتبة jQuery Calendars قبل الاستخدام
if (typeof $ !== 'undefined' && $.calendars) {
this._initHijriCalendar();
} else {
console.warn('jQuery Calendars library not loaded properly. Hijri calendar disabled.');
// إخفاء الحقل الهجري إذا لم تكن المكتبة متوفرة
if (this.$input_hijri) {
this.$input_hijri.hide();
}
});
}
this.__libInput++;
this.$el.datetimepicker(this.options);
@ -90,10 +66,65 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
}, 50);
},
// ✅ دالة منفصلة لتهيئة التقويم الهجري
_initHijriCalendar: function() {
var self = this;
// Enhanced click handler with better UX
this.$input_hijri.click(function (e) {
e.preventDefault();
e.stopPropagation();
if ($.calendars && self.$input_hijri.hasClass('hasCalendarsPicker')) {
self.$input_hijri.calendarsPicker('show');
}
});
try {
// ✅ Modern configuration with enhanced features and fixed navigation
this.$input_hijri.calendarsPicker({
calendar: $.calendars.instance('islamic', this.options.locale || 'ar'),
dateFormat: 'M d, yyyy',
showAnim: 'slideDown',
showSpeed: 'fast',
showOnFocus: false,
closeOnDateSelect: true,
yearRange: 'c-100:c+50',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
localNumbers: true,
renderer: this._getModernRenderer(),
onSelect: this._convertDateToHijri.bind(this),
onShow: function() {
// Add modern CSS class for styling
$('.calendars-popup').addClass('hijri-modern-popup');
// ✅ إصلاح أزرار التنقل بعد ظهور التقويم
setTimeout(function() {
$('.calendars-prev').html('').attr('title', 'الشهر السابق');
$('.calendars-next').html('').attr('title', 'الشهر التالي');
}, 10);
}
});
} catch (error) {
console.error('Error initializing Hijri calendar:', error);
// إخفاء الحقل الهجري في حالة فشل التهيئة
if (this.$input_hijri) {
this.$input_hijri.hide();
}
}
},
/**
* Get modern renderer configuration with fixed navigation buttons
*/
_getModernRenderer: function() {
// التحقق من توفر المكتبة قبل الاستخدام
if (!$.calendarsPicker || !$.calendarsPicker.defaultRenderer) {
return {};
}
return $.extend({}, $.calendarsPicker.defaultRenderer, {
picker: '<div class="calendars">{months}</div>',
monthRow: '<div class="calendars-month-row">{months}</div>',
@ -127,37 +158,47 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
},
_convertGregorianToHijri: function (date) {
// التحقق من توفر المكتبة
if (!$.calendars) {
return null;
}
var year, month, day, jd, formatted_date;
var calendar = $.calendars.instance('islamic');
if (date && !_.isUndefined(date)) {
date = moment(date).locale('en');
month = parseInt(date.format('M'));
day = parseInt(date.format('D'));
year = parseInt(date.format('YYYY'));
jd = $.calendars.instance('gregorian').toJD(year, month, day);
formatted_date = calendar.fromJD(jd);
var hijriMonth = calendar.formatDate('MM', formatted_date);
var hijriDate = calendar.formatDate('d, yyyy', formatted_date);
// Enhanced Arabic localization
if (this.options.locale === 'ar' || !this.options.locale) {
hijriDate = hijriDate.fromDigits();
// Find Arabic month name
var arabicMonth = _.find(hijriMonths, function (value, key) {
return key === hijriMonth;
});
hijriMonth = arabicMonth || hijriMonth;
try {
date = moment(date).locale('en');
month = parseInt(date.format('M'));
day = parseInt(date.format('D'));
year = parseInt(date.format('YYYY'));
jd = $.calendars.instance('gregorian').toJD(year, month, day);
formatted_date = calendar.fromJD(jd);
var hijriMonth = calendar.formatDate('MM', formatted_date);
var hijriDate = calendar.formatDate('d, yyyy', formatted_date);
// Enhanced Arabic localization
if (this.options.locale === 'ar' || !this.options.locale) {
hijriDate = hijriDate.fromDigits();
// Find Arabic month name
var arabicMonth = _.find(hijriMonths, function (value, key) {
return key === hijriMonth;
});
hijriMonth = arabicMonth || hijriMonth;
}
return _.str.sprintf("%s %s", hijriMonth, hijriDate);
} catch (error) {
console.error('Error converting Gregorian to Hijri:', error);
return null;
}
return _.str.sprintf("%s %s", hijriMonth, hijriDate);
}
},
_convertDateToHijri: function (date) {
if (!date || date.length === 0) {
if (!date || date.length === 0 || !$.calendars) {
return false;
}
@ -183,10 +224,12 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
this.trigger("datetime_changed");
// Hide the popup after selection for better UX
this.$input_hijri.calendarsPicker('hide');
if (this.$input_hijri && this.$input_hijri.hasClass('hasCalendarsPicker')) {
this.$input_hijri.calendarsPicker('hide');
}
} catch (error) {
console.warn('Hijri date conversion error:', error);
console.error('Hijri date conversion error:', error);
}
},
@ -201,9 +244,13 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
// Enhanced placeholder handling
if (hijri_value) {
this.$input_hijri.val(hijri_value).removeClass('o_input_placeholder');
if (this.$input_hijri && this.$input_hijri.length) {
this.$input_hijri.val(hijri_value).removeClass('o_input_placeholder');
}
} else {
this.$input_hijri.val('').addClass('o_input_placeholder');
if (this.$input_hijri && this.$input_hijri.length) {
this.$input_hijri.val('').addClass('o_input_placeholder');
}
}
},
@ -212,7 +259,11 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
$(document).off('click.calendars');
if (this.$input_hijri && this.$input_hijri.hasClass('hasCalendarsPicker')) {
this.$input_hijri.calendarsPicker('destroy');
try {
this.$input_hijri.calendarsPicker('destroy');
} catch (error) {
console.warn('Error destroying calendars picker:', error);
}
}
if (this.$el) {
@ -275,7 +326,7 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
// Enhanced integration with Odoo's form validation
if ($.validator) {
$.validator.addMethod('hijriDate', function(value, element) {
if (!value) return true;
if (!value || !$.calendars) return true;
try {
var calendar = $.calendars.instance('islamic');