🔧 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:
parent
18bf6b4d46
commit
c4d0ad051f
|
|
@ -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': [],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue