Revert "Fix: Hijri Datepicker Complete Solution"

This commit is contained in:
Mohamed Eltayar 2025-08-29 01:54:36 +03:00 committed by GitHub
parent a6d12f7a93
commit 0b1dee0abd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 110 additions and 217 deletions

View File

@ -2,21 +2,31 @@
{ {
'name': 'Web Hijri Datepicker Enhanced', 'name': 'Web Hijri Datepicker Enhanced',
'version': '2.2.1', 'version': '2.2.0',
'category': 'Web/Tools', 'category': 'Web/Tools',
'summary': 'Modern Hijri Calendar Integration with Enhanced UI/UX - Fixed', 'summary': 'Modern Hijri Calendar Integration with Enhanced UI/UX',
'description': """ 'description': """
Enhanced Web Hijri Datepicker v2.2.1 - All Issues Fixed Enhanced Web Hijri Datepicker v2.2.0
========================================================= =====================================
🌟 **Major Fixes & Improvements** 🌟 **Major Update with Modern Design and Performance Improvements**
**Fixed Issues:** **New Features:**
Fixed __libInput undefined error Updated jQuery Calendars library to v2.2.0
Fixed library paths (2.0.2 instead of 2.2.0) Modern, responsive UI design matching Odoo's aesthetics
Fixed navigation buttons not working Enhanced Arabic/RTL language support
Improved error handling and stability Improved performance and memory optimization
Enhanced CSS for better button interactions Better error handling and validation
Smooth animations and transitions
Mobile-friendly responsive design
**Key Improvements:**
40% faster loading times
25% reduced memory usage
60% better responsiveness
Enhanced integration with Odoo forms
Improved accessibility features
Better cross-browser compatibility
**Features:** **Features:**
Automatic conversion between Gregorian and Hijri dates Automatic conversion between Gregorian and Hijri dates
@ -25,21 +35,19 @@ Enhanced Web Hijri Datepicker v2.2.1 - All Issues Fixed
Full Arabic language support with proper RTL Full Arabic language support with proper RTL
Clear placeholders and intuitive user experience Clear placeholders and intuitive user experience
Seamless integration with all Odoo date fields Seamless integration with all Odoo date fields
Working navigation buttons for months/years
Stable and production-ready
**Technical Specs:** **Technical Specs:**
Compatible with Odoo 14.0+ Compatible with Odoo 14.0+
Supports multiple Islamic calendar variants Supports multiple Islamic calendar variants
Responsive design for all screen sizes Responsive design for all screen sizes
Modern CSS3 with smooth animations Modern CSS3 with smooth animations
Enhanced JavaScript with comprehensive error handling Enhanced JavaScript with error handling
Optimized for production environments Optimized for production environments
This module automatically adds Hijri date picker functionality below every standard date field in Odoo, providing users with an intuitive way to work with Islamic calendar dates. This module automatically adds Hijri date picker functionality below every standard date field in Odoo, providing users with an intuitive way to work with Islamic calendar dates.
""", """,
'author': 'Expert Solutions', 'author': 'Your Company',
'website': 'https://www.exp-sa.com', 'website': 'https://www.yourcompany.com',
'license': 'LGPL-3', 'license': 'LGPL-3',
'depends': ['web'], 'depends': ['web'],
'data': [ 'data': [
@ -47,27 +55,20 @@ This module automatically adds Hijri date picker functionality below every stand
], ],
'assets': { 'assets': {
'web.assets_backend': [ 'web.assets_backend': [
# ✅ CSS files
'web_hijri_datepicker/static/src/scss/hijri_modern.css', 'web_hijri_datepicker/static/src/scss/hijri_modern.css',
'web_hijri_datepicker/static/src/scss/web_hijri_date.scss', 'web_hijri_datepicker/static/src/scss/web_hijri_date.scss',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.plugin.js',
# ✅ FIXED: Using correct path 2.0.2 instead of 2.2.0 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.0.2/jquery.plugin.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.0.2/jquery.calendars.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.0.2/jquery.calendars.all.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.0.2/jquery.calendars.plus.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.0.2/jquery.calendars.picker.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.0.2/jquery.calendars.islamic.js', 'web_hijri_datepicker/static/lib/jquery.calendars.package-2.2.0/jquery.calendars.islamic-fa.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.0.2/jquery.calendars.islamic-ar.js',
'web_hijri_datepicker/static/lib/jquery.calendars.package-2.0.2/jquery.calendars.islamic-fa.js',
# Time entry files
'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.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.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.js',
'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.timeentry-ar.js', 'web_hijri_datepicker/static/lib/jquery.timeentry.package-2.0.1/jquery.timeentry-ar.js',
# ✅ Our custom JavaScript
'web_hijri_datepicker/static/src/js/web_hijri_date.js', 'web_hijri_datepicker/static/src/js/web_hijri_date.js',
], ],
}, },
@ -89,11 +90,11 @@ This module automatically adds Hijri date picker functionality below every stand
'python': [], 'python': [],
'bin': [], 'bin': [],
}, },
'maintainers': ['Expert Solutions Team'], 'maintainers': ['Your Name'],
'support': 'support@exp-sa.com', 'support': 'support@yourcompany.com',
'price': 0, 'price': 0,
'currency': 'USD', 'currency': 'USD',
'live_test_url': 'https://demo.exp-sa.com', 'live_test_url': 'https://demo.yourcompany.com',
'demo': [], 'demo': [],
'test': [], 'test': [],
} }

View File

@ -34,142 +34,68 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
datepicker.DateWidget.include({ datepicker.DateWidget.include({
start: function () { start: function () {
var self = this; var self = this;
// ✅ FIX: Initialize __libInput if it doesn't exist
if (typeof this.__libInput === 'undefined') {
this.__libInput = 0;
}
this.$input = this.$('input.o_datepicker_input'); this.$input = this.$('input.o_datepicker_input');
this.$input_hijri = this.$('input.o_hijri'); this.$input_hijri = this.$('input.o_hijri');
// ✅ Add placeholder for Gregorian field // ✅ إضافة بسيطة للـ placeholder للحقل الميلادي
if (this.$input && this.$input.length && !this.$input.attr('placeholder')) { if (this.$input && this.$input.length && !this.$input.attr('placeholder')) {
this.$input.attr('placeholder', 'التاريخ الميلادي'); this.$input.attr('placeholder', 'التاريخ الميلادي');
} }
// ✅ Initialize Hijri calendar with safety checks // Enhanced click handler with better UX
if (this.$input_hijri && this.$input_hijri.length) { this.$input_hijri.click(function (e) {
this._initHijriCalendar(); e.preventDefault();
} e.stopPropagation();
self.$input_hijri.calendarsPicker('show');
});
// ✅ FIX: Safe datetimepicker initialization // Modern configuration with enhanced features
if (this.$el && this.$el.datetimepicker) { this.$input_hijri.calendarsPicker({
this.__libInput++; calendar: $.calendars.instance('islamic', this.options.locale || 'ar'),
try { dateFormat: 'M d, yyyy',
this.$el.datetimepicker(this.options); showAnim: 'slideDown', // Modern animation
} catch (e) { showSpeed: 'fast',
console.warn('Error initializing datetimepicker:', e); showOnFocus: false,
} finally { closeOnDateSelect: true, // Better UX - close after selection
this.__libInput--; yearRange: 'c-100:c+50', // Extended year range
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
localNumbers: true, // Enable Arabic numerals
renderer: this._getModernRenderer(),
onSelect: this._convertDateToHijri.bind(this),
onShow: function() {
// Add modern CSS class for styling
$('.calendars-popup').addClass('hijri-modern-popup');
} }
} });
this.__libInput++;
this.$el.datetimepicker(this.options);
this.__libInput--;
this._setReadonly(false); this._setReadonly(false);
// ✅ Final check for placeholder and Hijri calendar // ✅ تأكد مرة أخيرة من الـ placeholder بعد تحميل datetimepicker
setTimeout(function() { setTimeout(function() {
if (self.$input && self.$input.length && !self.$input.attr('placeholder')) { if (self.$input && self.$input.length && !self.$input.attr('placeholder')) {
self.$input.attr('placeholder', 'التاريخ الميلادي'); self.$input.attr('placeholder', 'التاريخ الميلادي');
} }
}, 50);
// Try to initialize Hijri calendar again if not done
if (typeof $ !== 'undefined' && $.calendars && self.$input_hijri &&
self.$input_hijri.length && !self.$input_hijri.hasClass('hasCalendarsPicker')) {
self._initHijriCalendar();
}
}, 200);
},
// ✅ Separate method for Hijri calendar initialization
_initHijriCalendar: function() {
var self = this;
// Check if jQuery Calendars library is available
if (typeof $ === 'undefined' || !$.calendars || !$.calendars.instance) {
console.warn('jQuery Calendars library not loaded yet. Will retry...');
return;
}
try {
// Enhanced click handler with better event handling
this.$input_hijri.off('click.hijri').on('click.hijri', function (e) {
e.preventDefault();
e.stopPropagation();
if (self.$input_hijri.hasClass('hasCalendarsPicker')) {
self.$input_hijri.calendarsPicker('show');
}
});
// ✅ Initialize calendar with fixed configuration
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
$('.calendars-popup').addClass('hijri-modern-popup');
// ✅ FIX: Navigation buttons with proper symbols
setTimeout(function() {
// Fix previous button
$('.calendars-prev').each(function() {
$(this).html('').attr('title', 'الشهر السابق');
$(this).css({
'cursor': 'pointer',
'user-select': 'none',
'pointer-events': 'auto'
});
});
// Fix next button
$('.calendars-next').each(function() {
$(this).html('').attr('title', 'الشهر التالي');
$(this).css({
'cursor': 'pointer',
'user-select': 'none',
'pointer-events': 'auto'
});
});
}, 50);
}
});
console.log('Hijri calendar initialized successfully');
} catch (error) {
console.error('Error initializing Hijri calendar:', error);
}
}, },
/** /**
* Get modern renderer configuration with fixed navigation buttons * Get modern renderer configuration for better styling
*/ */
_getModernRenderer: function() { _getModernRenderer: function() {
// Check if library is available
if (!$ || !$.calendarsPicker || !$.calendarsPicker.defaultRenderer) {
return {};
}
return $.extend({}, $.calendarsPicker.defaultRenderer, { return $.extend({}, $.calendarsPicker.defaultRenderer, {
picker: '<div class="calendars">{months}</div>', picker: '<div class="calendars">{months}</div>',
monthRow: '<div class="calendars-month-row">{months}</div>', monthRow: '<div class="calendars-month-row">{months}</div>',
month: '<div class="calendars-month">' + month: '<div class="calendars-month">' +
'<div class="calendars-month-header">' + '<div class="calendars-month-header">' +
'<button type="button" class="calendars-nav calendars-prev" title="الشهر السابق"></button>' + '<button type="button" class="calendars-nav calendars-prev" title="{prevText}">{prevText}</button>' +
'<div class="calendars-month-year">{monthHeader}</div>' + '<div class="calendars-month-year">{monthHeader}</div>' +
'<button type="button" class="calendars-nav calendars-next" title="الشهر التالي"></button>' + '<button type="button" class="calendars-nav calendars-next" title="{nextText}">{nextText}</button>' +
'</div>' + '</div>' +
'<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table>' + '<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table>' +
'</div>', '</div>',
@ -195,53 +121,41 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
}, },
_convertGregorianToHijri: function (date) { _convertGregorianToHijri: function (date) {
// Check if library is available
if (!$ || !$.calendars || !$.calendars.instance) {
return null;
}
var year, month, day, jd, formatted_date; var year, month, day, jd, formatted_date;
var calendar; var calendar = $.calendars.instance('islamic');
if (date && !_.isUndefined(date)) { if (date && !_.isUndefined(date)) {
try { date = moment(date).locale('en');
calendar = $.calendars.instance('islamic'); month = parseInt(date.format('M'));
date = moment(date).locale('en'); day = parseInt(date.format('D'));
month = parseInt(date.format('M')); year = parseInt(date.format('YYYY'));
day = parseInt(date.format('D'));
year = parseInt(date.format('YYYY')); jd = $.calendars.instance('gregorian').toJD(year, month, day);
formatted_date = calendar.fromJD(jd);
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);
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) {
// Enhanced Arabic localization hijriDate = hijriDate.fromDigits();
if (this.options.locale === 'ar' || !this.options.locale) { // Find Arabic month name
hijriDate = hijriDate.fromDigits(); var arabicMonth = _.find(hijriMonths, function (value, key) {
// Find Arabic month name return key === hijriMonth;
var arabicMonth = _.find(hijriMonths, function (value, key) { });
return key === hijriMonth; hijriMonth = arabicMonth || 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);
} }
return null;
}, },
_convertDateToHijri: function (date) { _convertDateToHijri: function (date) {
if (!date || date.length === 0 || !$ || !$.calendars) { if (!date || date.length === 0) {
return false; return false;
} }
// Prevent event bubbling // Prevent event bubbling for better UX
$(document).off('click.calendars').on('click.calendars', '.calendars a', function (e) { $(document).off('click.calendars').on('click.calendars', '.calendars a', function (e) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
@ -262,13 +176,11 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
this.setValue(this._parseClient(dateValue)); this.setValue(this._parseClient(dateValue));
this.trigger("datetime_changed"); this.trigger("datetime_changed");
// Hide the popup after selection // Hide the popup after selection for better UX
if (this.$input_hijri && this.$input_hijri.hasClass('hasCalendarsPicker')) { this.$input_hijri.calendarsPicker('hide');
this.$input_hijri.calendarsPicker('hide');
}
} catch (error) { } catch (error) {
console.error('Hijri date conversion error:', error); console.warn('Hijri date conversion error:', error);
} }
}, },
@ -282,12 +194,10 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
var hijri_value = parsed_date ? this._convertGregorianToHijri(parsed_date) : null; var hijri_value = parsed_date ? this._convertGregorianToHijri(parsed_date) : null;
// Enhanced placeholder handling // Enhanced placeholder handling
if (this.$input_hijri && this.$input_hijri.length) { if (hijri_value) {
if (hijri_value) { this.$input_hijri.val(hijri_value).removeClass('o_input_placeholder');
this.$input_hijri.val(hijri_value).removeClass('o_input_placeholder'); } else {
} else { this.$input_hijri.val('').addClass('o_input_placeholder');
this.$input_hijri.val('').addClass('o_input_placeholder');
}
} }
}, },
@ -295,32 +205,14 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
// Clean up event handlers // Clean up event handlers
$(document).off('click.calendars'); $(document).off('click.calendars');
if (this.$input_hijri) { if (this.$input_hijri && this.$input_hijri.hasClass('hasCalendarsPicker')) {
this.$input_hijri.off('click.hijri'); this.$input_hijri.calendarsPicker('destroy');
if (this.$input_hijri.hasClass('hasCalendarsPicker')) {
try {
this.$input_hijri.calendarsPicker('destroy');
} catch (error) {
console.warn('Error destroying calendars picker:', error);
}
}
} }
if (this.$el && this.$el.datetimepicker) { if (this.$el) {
// ✅ FIX: Initialize __libInput if not exists
if (typeof this.__libInput === 'undefined') {
this.__libInput = 0;
}
this.__libInput++; this.__libInput++;
try { this.$el.datetimepicker('destroy');
this.$el.datetimepicker('destroy'); this.__libInput--;
} catch (e) {
console.warn('Error destroying datetimepicker:', e);
} finally {
this.__libInput--;
}
} }
}, },
@ -375,9 +267,9 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
}); });
// Enhanced integration with Odoo's form validation // Enhanced integration with Odoo's form validation
if ($ && $.validator) { if ($.validator) {
$.validator.addMethod('hijriDate', function(value, element) { $.validator.addMethod('hijriDate', function(value, element) {
if (!value || !$ || !$.calendars) return true; if (!value) return true;
try { try {
var calendar = $.calendars.instance('islamic'); var calendar = $.calendars.instance('islamic');
@ -390,7 +282,7 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
} }
// Global configuration for better performance // Global configuration for better performance
if ($ && $.calendarsPicker) { if ($.calendarsPicker) {
$.calendarsPicker.setDefaults({ $.calendarsPicker.setDefaults({
showSpeed: 'fast', showSpeed: 'fast',
showAnim: 'slideDown', showAnim: 'slideDown',