CrudField JavaScript Library for Bootstrap Date Picker

[rchampagneca]

Tried to use the CrudField JavaScript Library calls to get and set dates for a Bootstrap Date Picker (Backpack pro). Is it supported ? Tried this script as a workaround :

function setDateForInputField(variableName, monthsToAdd) {
    var element = document.querySelector(`[bp-field-name="${variableName}"]`);
    var formattedtoValue = null;

    if (monthsToAdd !== null) {
        var currentDate = new Date();
        var toValue = new Date(currentDate.setMonth(currentDate.getMonth() + monthsToAdd));
        var formattedtoValue = toValue.toISOString().slice(0, 10);
    }
    var inputField = element.querySelector('input[bp-field-main-input]');
    var dateField = element.querySelector('input[data-bs-datepicker]');
    $(dateField).datepicker('setDate', toValue); // Order of the next 2 methods seems important !
    $(inputField).attr("value", formattedtoValue);
}

Does the job.

[promatik]

Hi @rchampagneca!

Indeed some fields are not linear in terms of setting a value. Specially jQuery fields.
In most of the fields field.value = 'new value' will easily set a new value, this date picker requires extra steps.

Your solution works 👌

---

By the way, just for the reference, CRUD Fields can make it easy to manage the inputs.

function setDateForInputField(fieldName, monthsToAdd) {
	let field = crud.field(fieldName);
	let $datepicker = field.wrapper.find('[data-bs-datepicker]').datepicker();
	
	// date manipulation
	let date = new Date();
	date.setMonth(date.getMonth() + monthsToAdd)
	
	$datepicker.datepicker('setDate', date);
	field.value = date.toISOString().slice(0, 10);
}

It's not tested, but should work the same way ...

[rchampagneca]

Hello @promatik /,

Unfortunately, the function above generates an SQL error :

SQLSTATE[22007]: Invalid datetime format: 1292 Incorrect date value: '16-03-2023' probably because I'm using a datepicker format option of "dd-mm-yyyy".

I've also tried using the Boostrap datepicker custom formatting options for toValue and toDisplay without success.

A more elegant solution as you suggested, using field.wrapper.find would be the following :

function setDateForInputField(fieldName, monthsToAdd) {
    let field = crud.field(fieldName);
    let inputField = field.wrapper.find('[bp-field-main-input]');
    let dateField = field.wrapper.find('[data-bs-datepicker]');

    let formattedtoValue = null;
    let currentDate = null;
 
    if (monthsToAdd !== null) {
        currentDate = new Date();
        currentDate.setMonth(currentDate.getMonth() + monthsToAdd);
        formattedtoValue = currentDate.toISOString().slice(0, 10);
    } 

    dateField.datepicker('setDate', currentDate); // L'ordre des 2 méthodes suivantes est important !
    inputField.attr("value", formattedtoValue);
}

[promatik]

@tabacitu this may have highlighted a possible issue we have with CRUD Fields.

Not all fields allow to just set value (crud.field('field').value = 123). Particularly, jQuery fields.
It would be possible to add a behaviour in this fields where on set value, we would modify the field accordingly, to properly set the value to it.

I'm not sure how many field have this issue, but maybe we should think about it ...