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

100
test.js
View File

@@ -8,12 +8,16 @@ import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-icons/font/bootstrap-icons.min.css"
// bootstrap-datepicker loaded separately (not bundled in grunt build)
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
const Editable = require("bootstrap5-editable/js/bootstrap-editable");
console.log("Editable:", Editable);
$.fn.editable.defaults.mode = 'inline';
// Import the editable functionality (attaches to jQuery.fn) - using Grunt-built version
require("./dist/bootstrap5-editable/js/bootstrap-editable");
console.log("$.fn.editable available:", typeof $.fn.editable);
console.log("$.fn.datepicker available:", typeof $.fn.datepicker);
console.log("$.fn.bdatepicker available:", typeof $.fn.bdatepicker);
$.fn.editable.defaults.mode = 'popup';
$(function() {
@@ -58,6 +62,7 @@ $(function() {
$('#datepicker').editable({
type: 'date',
url: 'test.php', // URL to send the POST request
value: new Date().toISOString().split('T')[0], // Set to current date (YYYY-MM-DD)
format: 'yyyy-mm-dd', // Date format
viewformat: 'dd/mm/yyyy', // How the user sees it
datepicker: {
@@ -67,17 +72,92 @@ $(function() {
},
success: (response, newValue)=> {
console.log("Date saved successfully:", response);
console.log("New value received:", newValue);
},
error: (response) => {
console.error("Date save error:", response);
}
}).on('shown', (e, editable)=> {
console.log("Datepicker shown:", editable);
$(editable.input.$input).datepicker({
weekStart: 1,
autoclose: true,
todayHighlight: true
}).datepicker('show')
}).on('save', function(e, params) {
console.log("Date save event:", params);
console.log("Value being saved:", params.newValue);
console.log("Submit value:", params.submitValue);
}).on('shown', function(e, editable) {
console.log("Datepicker shown event fired", editable);
// Check if the type is now set
if (editable && editable.input) {
console.log("Input type after shown:", editable.input.type);
console.log("Editable type after shown:", editable.type);
}
// Debug: Check if datepicker elements exist in DOM
console.log("Looking for datepicker in DOM...");
console.log("Datepicker elements found:", $('.datepicker').length);
console.log("Bootstrap datepicker elements found:", $('.bootstrap-datepicker').length);
console.log("All datepicker classes:", $('[class*="datepicker"]').length);
// Check if any datepicker elements are visible
$('.datepicker, .bootstrap-datepicker, [class*="datepicker"]').each(function(i, el) {
console.log(`Datepicker element ${i}:`, {
class: el.className,
visible: $(el).is(':visible'),
display: $(el).css('display'),
position: $(el).css('position'),
zIndex: $(el).css('z-index')
});
});
// Debug the input element that should have datepicker
if (editable && editable.input && editable.input.$input) {
console.log("Input element:", editable.input.$input[0]);
console.log("Input datepicker data:", editable.input.$input.data('datepicker'));
// Check if bootstrap-datepicker functions are available on the input
console.log("Input $input.datepicker available:", typeof editable.input.$input.datepicker);
console.log("Input $input.bdatepicker available:", typeof editable.input.$input.bdatepicker);
// Try to manually initialize datepicker to see if it works
try {
console.log("Attempting manual datepicker initialization...");
editable.input.$input.datepicker({
weekStart: 1,
autoclose: true,
todayHighlight: true
});
console.log("Manual datepicker initialization successful!");
console.log("Input datepicker data after manual init:", editable.input.$input.data('datepicker'));
// Try setting a date value manually
editable.input.$input.datepicker('setDate', new Date());
console.log("Set manual date, datepicker data now:", editable.input.$input.data('datepicker'));
} catch (error) {
console.error("Manual datepicker initialization failed:", error);
}
}
}).on('hidden', function(e, reason) {
console.log("Datepicker hidden event fired, reason:", reason);
});
console.log("Datepicker element setup complete:", $('#datepicker').data('editable'));
// Wait a bit for initialization and then check again
setTimeout(function() {
console.log("=== CHECKING DATEPICKER AFTER TIMEOUT ===");
const datepickerEd = $('#datepicker').data('editable');
if (datepickerEd) {
console.log("DATEPICKER TYPE:", datepickerEd.type, "OPTIONS:", datepickerEd.options);
console.log("DATEPICKER INPUT:", datepickerEd.input);
if (datepickerEd.input) {
console.log("DATEPICKER INPUT TYPE:", typeof datepickerEd.input);
console.log("DATEPICKER INPUT CONSTRUCTOR:", datepickerEd.input.constructor.name);
console.log("DATEPICKER INPUT internal type:", datepickerEd.input.type);
}
} else {
console.log("NO DATEPICKER EDITABLE DATA FOUND!");
}
// Also check available input types
console.log("Available input types:", Object.keys($.fn.editabletypes || {}));
}, 100);
})