Enhanced JavaScript with proper placeholder handling for both Gregorian and Hijri fields
This commit is contained in:
Mohamed Eltayar
parent
2812cde5cc
commit
966609559c
|
|
@ -2,13 +2,7 @@
|
|||
* Enhanced Hijri Datepicker for Odoo 14
|
||||
* Seamless integration with Odoo's standard datepicker system
|
||||
* Maintains all Hijri functionality while following Odoo's patterns
|
||||
*
|
||||
* Features:
|
||||
* - Full compatibility with Odoo 14 datepicker architecture
|
||||
* - Preserved Hijri calendar conversion accuracy
|
||||
* - Enhanced UI/UX matching Odoo's standard appearance
|
||||
* - Improved performance and error handling
|
||||
* - Better accessibility and RTL support
|
||||
* Fixed placeholder handling for both Gregorian and Hijri fields
|
||||
*/
|
||||
|
||||
odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
||||
|
|
@ -47,13 +41,12 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
};
|
||||
|
||||
/**
|
||||
* Enhanced DateWidget with improved Odoo integration
|
||||
* Maintains all existing Hijri functionality while improving performance
|
||||
* Enhanced DateWidget with improved Odoo integration and placeholder handling
|
||||
*/
|
||||
datepicker.DateWidget.include({
|
||||
|
||||
/**
|
||||
* Initialize the enhanced datepicker with Odoo-compatible settings
|
||||
* Initialize the enhanced datepicker with proper placeholder handling
|
||||
*/
|
||||
start: function () {
|
||||
var self = this;
|
||||
|
|
@ -67,6 +60,9 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
return def;
|
||||
}
|
||||
|
||||
// Set proper placeholders based on locale
|
||||
this._setupPlaceholders();
|
||||
|
||||
// Enhanced click handler with proper event delegation
|
||||
this.$input_hijri.on('click.hijri_picker', function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -87,6 +83,38 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
return def;
|
||||
},
|
||||
|
||||
/**
|
||||
* Setup proper placeholders for both Gregorian and Hijri inputs
|
||||
*/
|
||||
_setupPlaceholders: function () {
|
||||
var locale = session.user_context.lang || 'en';
|
||||
var isArabic = locale.startsWith('ar');
|
||||
|
||||
// Gregorian input placeholder
|
||||
var gregorianPlaceholder = isArabic ?
|
||||
'التاريخ الميلادي (مم/يي/سسسس)' :
|
||||
'Gregorian Date (mm/dd/yyyy)';
|
||||
|
||||
// Hijri input placeholder
|
||||
var hijriPlaceholder = isArabic ?
|
||||
'التاريخ الهجري (الشهر اليوم، السنة)' :
|
||||
'Hijri Date (Month Day, Year)';
|
||||
|
||||
// Apply placeholders with fallback
|
||||
if (this.$input && this.$input.length) {
|
||||
this.$input.attr('placeholder', gregorianPlaceholder);
|
||||
|
||||
// Also handle the case where placeholder might be overridden by Odoo
|
||||
if (!this.$input.attr('placeholder') || this.$input.attr('placeholder').indexOf('mm/dd/yyyy') === -1) {
|
||||
this.$input.attr('placeholder', gregorianPlaceholder);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$input_hijri && this.$input_hijri.length) {
|
||||
this.$input_hijri.attr('placeholder', hijriPlaceholder);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize Hijri calendar picker with Odoo-compatible styling
|
||||
*/
|
||||
|
|
@ -246,10 +274,30 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
var hijriDate = this._convertGregorianToHijri(gregorianDate);
|
||||
if (hijriDate) {
|
||||
this.$input_hijri.val(hijriDate);
|
||||
this._updatePlaceholderVisibility();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update placeholder visibility based on field values
|
||||
*/
|
||||
_updatePlaceholderVisibility: function () {
|
||||
// Handle Gregorian field placeholder
|
||||
if (this.$input.val()) {
|
||||
this.$input.removeClass('o_input_placeholder');
|
||||
} else {
|
||||
this.$input.addClass('o_input_placeholder');
|
||||
}
|
||||
|
||||
// Handle Hijri field placeholder
|
||||
if (this.$input_hijri.val()) {
|
||||
this.$input_hijri.removeClass('o_input_placeholder');
|
||||
} else {
|
||||
this.$input_hijri.addClass('o_input_placeholder');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Enhanced Gregorian to Hijri conversion with better error handling
|
||||
*/
|
||||
|
|
@ -331,6 +379,9 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
var formattedDate = gregorianMoment.format('YYYY-MM-DD');
|
||||
this.$input.val(formattedDate);
|
||||
|
||||
// Update placeholder visibility
|
||||
this._updatePlaceholderVisibility();
|
||||
|
||||
// Trigger Odoo's change events
|
||||
this.$input.trigger('change');
|
||||
this.trigger_up('field_changed', {
|
||||
|
|
@ -368,7 +419,7 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
},
|
||||
|
||||
/**
|
||||
* Enhanced setValue method with better Hijri synchronization
|
||||
* Enhanced setValue method with better Hijri synchronization and placeholder handling
|
||||
*/
|
||||
setValue: function (value) {
|
||||
this._super.apply(this, arguments);
|
||||
|
|
@ -391,6 +442,9 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
.addClass('o_input_placeholder')
|
||||
.removeClass('text-success');
|
||||
}
|
||||
|
||||
// Update placeholder visibility for both fields
|
||||
this._updatePlaceholderVisibility();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -553,6 +607,6 @@ odoo.define('web_hijri_datepicker.enhanced_datepicker', function (require) {
|
|||
});
|
||||
}
|
||||
|
||||
console.log('Enhanced Hijri Datepicker loaded successfully');
|
||||
console.log('Enhanced Hijri Datepicker with proper placeholder handling loaded successfully');
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue