Jquery Datepicker in multiple fields and saving the inputs

Question

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:

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.
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

Have you tried adding an id attribute to the <td> ? Add some logic so as to ensure that each <td> has an id and then try it. I think that ids are required on the <td> — mkane
– mkane, Commented Nov 23, 2018 at 12:04
Thank you! But shouldn't they have different IDs then? How would I do that since I'm only listing them once? — Clopin Trouillefou
– Clopin Trouillefou, Commented Nov 23, 2018 at 12:09
Yes in html each id on the elements should be unique. It depend on how you are building up the table contents. If it entered by hand then just assign each td a unique id i.e. <td id="includeDatepicker1"> , <td id="includeDatepicker2"> etc.. etc.. — mkane
– mkane, Commented Nov 23, 2018 at 12:16
Sorry just looking at it again and jQuery('.datepicker').dateRangePicker( ... assigns to each input in the table based on the class. You would need some kind of id on the text input though for when submitting the data so you know what entity you are saving. — mkane
– mkane, Commented Nov 23, 2018 at 12:54

mkane · Accepted Answer · 2018-11-23 17:31:32Z

1

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");
}

edited Nov 23, 2018 at 17:31

answered Nov 23, 2018 at 14:36

mkane

1,03010 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Clopin Trouillefou Over a year ago

I don't know how to set different IDs or how to call them for the elements later on and I can't find anything for that searching on Google. What I did made them change on every page load which doesn't really achieve anything. I have only this one line (<input type="text" class="datepicker">) as the entire table is called in a loop to create a row for every customer.

Clopin Trouillefou Over a year ago

Still, thank you for your help, I just feel pretty stupid lol.

mkane Over a year ago

If each row on the table is for a customer then you could apply a html id attribute to that row as part of the table creation. The id could just be the primary key of the customer from the DB or something that would allow you to do a lookup and update their data in the DB. In the function then when it is called you could use JQuery to grab the parent row html ID and pass it to the AJAX call .. Don't give up everything is achievable. Maybe put what you have so far into a JSFiddle and we can take it from there...

Clopin Trouillefou Over a year ago

Can I marry you or at least honor you a thousand times on here? Just kidding, could you give me an example of how that call could look like? I managed to do the ID thing now.

Collectives™ on Stack Overflow

Jquery Datepicker in multiple fields and saving the inputs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related