tracer/x-editable-bs5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix datepicker functionality for Bootstrap 5 x-editable

Browse Source 
- Updated Gruntfile to use npm bootstrap-datepicker instead of bundled version
- Fixed DPGlobal reference from bdatepicker to datepicker
- Changed mode from inline to popup to ensure date input type is used
- Fixed missing type assignment in editable element initialization
- Enhanced input2value function with fallback logic to extract dates from dates array
- Added comprehensive debugging and error handling
- Datepicker now properly opens, captures selections, and submits formatted dates
This commit is contained in:
Micha
2025-07-26 14:25:39 +02:00
parent 1dbf4d2fa7
commit f4dc8a3dd0
20 changed files with 571 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/bootstrap5-editable.js vendored Normal file
View File

@@ -0,0 +1,32 @@
/*
X-Editable Bootstrap 5 - Complete Bundle
Uses npm bootstrap-datepicker instead of bundled version
Order matches Gruntfile.js for compatibility
*/
import $ from "jquery";
// Import bootstrap-datepicker from npm
import "bootstrap-datepicker";
// Core editable functionality - EXACT ORDER from Gruntfile
import "./editable-form/editable-form.js";
import "./editable-form/editable-form-utils.js";
import "./containers/editable-container.js";
import "./containers/editable-inline.js";
import "./element/editable-element.js";
import "./inputs/abstract.js";
import "./inputs/list.js";
import "./inputs/text.js";
import "./inputs/textarea.js";
import "./inputs/select.js";
// Date input (now uses npm bootstrap-datepicker)
import "./inputs/date/date.js";
import "./inputs/date/datefield.js";
// Bootstrap 5 specific containers and forms
import "./containers/editable-popover5.js";
import "./editable-form/editable-form-bootstrap5.js";
// Export jQuery for compatibility
export default $;

5
src/element/editable-element.js
View File

@@ -38,7 +38,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.input = $.fn.editableutils.createInput(this.options);
if(!this.input) {
return;
}
}
// Set the editable's type from the input's type
this.type = this.input.type;
//set value from settings or by element's text
if (this.options.value === undefined || this.options.value === null) {

96
src/inputs/date/date.js
View File

@@ -33,14 +33,27 @@ $(function(){
}
var Date = function (options) {
console.log("Date constructor called with options:", options);
this.init('date', options, Date.defaults);
this.initPicker(options, Date.defaults);
// Ensure type is set correctly
this.type = 'date';
console.log("Date constructor completed, type set to:", this.type);
};
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
$.extend(Date.prototype, {
prerender: function() {
console.log("Date.prerender() called");
// Call parent prerender
Date.superclass.prerender.call(this);
console.log("Date.prerender() completed, $input:", this.$input[0]);
},
initPicker: function(options, defaults) {
console.log("Date.initPicker() called");
//'format' is set directly from settings or data-* attributes
//by default viewformat equals to format
@@ -60,8 +73,8 @@ $(function(){
//language
this.options.datepicker.language = this.options.datepicker.language || 'en';
//store DPglobal
this.dpg = $.fn.bdatepicker.DPGlobal;
//store DPglobal - use datepicker instead of bdatepicker
this.dpg = $.fn.datepicker.DPGlobal;
//store parsed formats
this.parsedFormat = this.dpg.parseFormat(this.options.format);
@@ -69,7 +82,31 @@ $(function(){
},
render: function () {
this.$input.bdatepicker(this.options.datepicker);
// Debug: Check if render is being called
console.log("Date.render() called, options:", this.options.datepicker);
console.log("Input element for datepicker:", this.$input[0]);
// Ensure we have an input element
if (!this.$input || !this.$input.length) {
console.error("No input element found in render()");
return;
}
// Initialize datepicker immediately
try {
console.log("Attempting datepicker initialization in render()...");
this.$input.datepicker(this.options.datepicker);
console.log("Datepicker initialized successfully in render()");
console.log("Datepicker data after render:", this.$input.data('datepicker'));
// Force set the initial value if we have one
if (this.value) {
console.log("Setting initial value in render():", this.value);
this.$input.datepicker('setDate', this.value);
}
} catch (error) {
console.error("Error initializing datepicker in render():", error);
}
//"clear" link
if(this.options.clear) {
@@ -105,11 +142,60 @@ $(function(){
},
value2input: function(value) {
this.$input.bdatepicker('update', value);
console.log("Date.value2input() called with value:", value);
console.log("Input element in value2input:", this.$input[0]);
console.log("Datepicker data in value2input:", this.$input.data('datepicker'));
// Ensure datepicker is initialized before trying to update
if (!this.$input.data('datepicker')) {
console.log("Datepicker not initialized in value2input, initializing now...");
this.$input.datepicker(this.options.datepicker);
console.log("Datepicker data after manual init in value2input:", this.$input.data('datepicker'));
}
this.$input.datepicker('update', value);
},
input2value: function() {
return this.$input.data('datepicker').date;
console.log("Date.input2value() called");
var datepicker = this.$input.data('datepicker');
console.log("Datepicker object in input2value:", datepicker);
if (datepicker) {
console.log("Datepicker.date:", datepicker.date);
console.log("Datepicker.dates:", datepicker.dates);
console.log("Datepicker.getDate():", typeof datepicker.getDate === 'function' ? datepicker.getDate() : 'getDate not available');
if (datepicker.date) {
console.log("Returning datepicker.date:", datepicker.date);
return datepicker.date;
}
// Try getting date from dates array
if (datepicker.dates && datepicker.dates.length > 0) {
console.log("Returning from dates array:", datepicker.dates[0]);
return datepicker.dates[0];
}
// Try using getDate method
if (typeof datepicker.getDate === 'function') {
var dateFromMethod = datepicker.getDate();
console.log("Returning from getDate():", dateFromMethod);
return dateFromMethod;
}
}
// Fallback: try to parse the input value directly
var inputVal = this.$input.val();
console.log("Input value fallback:", inputVal);
if (inputVal) {
var parsedDate = this.parseDate(inputVal, this.parsedViewFormat);
console.log("Parsed date fallback:", parsedDate);
return parsedDate;
}
console.log("input2value returning null - no valid date found");
return null;
},
activate: function() {