Wsrtjtyk

I'm still learning and my newest project got me stuck on this:

Inside of a table to manage customers, I want to have an input field with a datepicker (https://longbill.github.io/jquery-date-range-picker/ using this) for every row, like this:

<td>

//some more content

    <div class="includeDatepicker">

        <input type="text" class="datepicker">

    </div>

</td>

the whole thing gets set up like this:

jQuery("document").ready(function () {

    jQuery('.datepicker').dateRangePicker({

    autoClose: true,

    singleDate : true,

    showShortcuts: false,

    singleMonth: true,

    startOfWeek: 'monday',

    separator : ' ~ ',

    format: 'DD.MM.YYYY HH:mm',

    time: {

        enabled: true

    }

});

});

Until here, it works fine. Then though:

1. The datepicker only appears for the first input field in the first row of the table and will appear only there even if the others are clicked. What can I do to add a datepicker to every input field? I'm already using a class selector. I have done my research on this and found some solutions, but I can't really wrap my head around it either way.




2. How would it be possible that the date written to the input fields is saved even when the page is refreshed?

I would greatly appreciate any help and I've done research before asking on here, but none of it was to great avail.

Greetings

I think for 2nd part an approach like this :

jQuery("document").ready(function () {

    jQuery('.datepicker').dateRangePicker({

    autoClose: true,

    singleDate : true,

    showShortcuts: false,

    singleMonth: true,

    startOfWeek: 'monday',

    separator : ' ~ ',

    format: 'DD.MM.YYYY HH:mm',

    time: {

        enabled: true

    }

},function(start, end, label) {

    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));

}

    );

});

Inside that function above you could then make an AJAX call to the DB but as I said earlier you will need some id on the element so you can pass it back to the service layer so as to ensure you know what entity they are updating....

Im am not sure what date range picker you are using but if the one I think then plenty of examples @ http://www.daterangepicker.com/#options

Add a new functions something like :

function updateDBWithVals(urlToServer,startDateFromFrontEnd,endDateFromFrontEnd,rowID) {    

    return $.ajax({

            url:            urlToServer,

            data:           {startDate : startDateFromFrontEnd, endDate: endDateFromFrontEnd, entityID: rowID},

            type:           "POST",                         

            success:        function(response) { 

                                    console.log(response);

                            },

            error:          function(error) {

                                console.log(error);

                            }

        }); 

}

Now in your call back function just call it i.e.

function(start, end, label) {

    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));

    updateDBWithVals("urlToYourServerLogic",start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'),"theIDOfTheRow");

}