How to define Editor default value (for input) based on input above

raphiw90

Hi everyone,

I'm creating an app to manage reservations of accommodations and I have created a table where I can enter every reservation I have made. The table contains an arrival_date column and a departure_date column.

I've been already researching here on the forum and in the net but I haven't been able to get it working.

When I add a new record the user selects an arrival_date, so would it be possible that the departure_date is dynamically generated (in the add new record mask of DataTables editor). As an example:

User input in the field arrival_date (via date picker): 01.01.2021
Automatically generated value in the field departure_date: "arrival_date + 1" (so I'd need 02.01.2021).

The thing is that I'd like to always be able to give the user the possibility to change the departure date because sometimes the duration of the booking is more than 1 day.

I guess I have to make some adjustments to the .js file to generate the data I need:

Thanks for your help!
Raphael

(function($){
    
$(document).ready(function() {
    
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'assets/php/table.tourdetails_acc.php',
        table: '#tourdetails_accbooking',
        fields: [
        
            {
                "label": "Tour Ref:",
                "name": "acc_booking.tour_id",
                "type": "select",
                "placeholder": "Select a tour",
                "def": jstourid, //variable with id of the tour fetched from outside the .js file
                "attr":{disabled:true}
            },
            {
                "label": "Arrival Date:",
                "name": "acc_booking.arrival_date",
                "type": "datetime",
                "format": "DD\/MM\/YY",
            },
            {
                "label": "Departure Date:",
                "name": "acc_booking.departure_date",
                "type": "datetime",
                "format": "DD\/MM\/YY",
            }
        ]
    } );
    
    var table = $('#tourdetails_accbooking').DataTable( {
        
        dom: 'Bfrtip',
        ajax: {
            url: "assets/php/table.tourdetails_acc.php",
            type: 'POST'
        },
        columns: [
            {
                "data": "tours.tour_ref"
            },
            { data: null, render: function ( data, type, row ) {
                // Combine the arrival date and departure date into a single table field
                return data.acc_booking.arrival_date+' - '+data.acc_booking.departure_date;
            } }
            
        ],
        select: true,
        colReorder: true,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ]
    } );
} );

}(jQuery));

colin

Yep, you can use dependent() for that - see example here. Set the dependent field on the arrival field, and adjust the departure based on that value. This example here is setting the salary in a similar way. You can use Moment.js for the date calculations, as it's excellent for all time/date based operations.

Colin

raphiw90

Thank you Colin for your swift reply. That's perfect worked out nicely!