input box datepicker not working in all pages of jQuery DataTables

Question

I have jsp page having jQuery DataTables which contain more then 20 pages I'm using textbox in datatable td tags which shows datepicker i.e. check-in /check-out date.

On the 1st page its works perfectly but on the other pages datepicker class is not apply. Here is following code which I used.

HTML code

<table id="tableBookingByBooker">
    <thead class="btn-default">
        <tr>
            <th>checkInDate</th>
            <th>checkInDate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input id="checkInDate${data[0]}" />
            </td>
            <td>
                <input id="Text1" />
            </td>
        </tr>
    </tbody>
</table>

JS Code:

$('input[id^=checkInDate]').each(function (index, element) {
    var checkOutDate = (new Date($('#checkOutDate' + $(this).attr('id').substring(11)).val()));
    checkOutDate.setDate(checkOutDate.getDate() - 1);
    $(this).datepicker({
        dateFormat: 'mm/dd/yy',
        maxDate: checkOutDate,
    });
});

$('input[id^=checkOutDate]').each(function (index, element) {
    var checkInDate = (new Date($('#checkInDate' + $(this).attr('id').substring(12)).val()));
    checkInDate.setDate(checkInDate.getDate() + 1);
    $(this).datepicker({
        dateFormat: 'mm/dd/yy',
        minDate: checkInDate,
    });
});

Input box (checkIn/checkout) Datepicker is successfully working in 1st page of datatable but other pages datepicker is not working.

I tried the pagination event and put js code in the function click but it did not work properly

My guess would be that you need to instantiate the date-pickers on page change (assuming they are getting unique ID's) — Ted
– Ted, Commented Apr 30, 2015 at 14:27
PUT CHECK-IN /CHECK-OUT CODE ABOVE DATA TABLE JS CODE....ITS WORK PROPERLY — Ravi Bhalsod
– Ravi Bhalsod, Commented May 1, 2015 at 9:40
Did you get this solved then? Want to accept an answer or close the question if it was something else entirely? — Maleki
– Maleki, Commented May 1, 2015 at 18:21
yes @maleki as per my question you answer is perfect here i suggest that any code which going to apply on data-table must be put before datatable js code. Thank you. — Ravi Bhalsod
– Ravi Bhalsod, Commented May 4, 2015 at 8:28
@RaviPrajapati I'm glad I could be of help. I think it might have been a language barrier issue that gave me a different impression. Normally if your issue is solved by someone or yourself, you click the check-mark next to an answer to indicate your acceptance of an answer. This helps others coming across the question know where to look first. — Maleki
– Maleki, Commented May 5, 2015 at 6:12

Maleki · Accepted Answer · 2015-04-30 19:34:40Z

1

As Ted pointed out, your best bet is to register an on "page change" event. The problem is that a one-time initialization using jquery select won't have an affect on dynamically loaded content.

There might be other ways, but the one referenced by dataTables looks like this.

https://datatables.net/reference/event/page

//Your Check-in UI DatePicker code.
var checkInInit = function () {}
//Your Check-out UI DatePicker code.
var checkOutInit = function () {}

var table = $('#dataTable').DataTable();
$('#dataTable').on('page.dt', function () {
    checkInInit();
    checkOutInit();
});

answered Apr 30, 2015 at 19:34

Maleki

1,4951 gold badge17 silver badges26 bronze badges

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

1 Comment

Chris Gong Over a year ago

on('page.dt') didn't work for me but on('draw.dt') did, stackoverflow.com/questions/32133849/…

Ravi Bhalsod · Accepted Answer · 2015-05-01 08:18:35Z

0

Yes function call successfully but the applied code checkIn/checkOut date picker is not working i have given unique name of each checkInDate and checkOut Date Elements. Here i applied following code...

// Check-in UI DatePicker code.
    var checkInInit = function () {
        alert('call');
        $('input[id^=checkInDate]').each(function(index, element) {
            var checkOutDate = (new Date($('#checkOutDate'+$(this).attr('id').substring(11)).val()));
            checkOutDate.setDate(checkOutDate.getDate() - 1);
            $(this).datepicker({
                dateFormat:'mm/dd/yy',
                maxDate : checkOutDate,
            });
        });

    }
    // Check-out UI DatePicker code.
    var checkOutInit = function () {
        alert('call');
        $('input[id^=checkOutDate]').each(function(index, element) {
            var checkInDate =(new Date( $('#checkInDate'+$(this).attr('id').substring(12)).val()));
            checkInDate.setDate(checkInDate.getDate() + 1);
                $(this).datepicker({
                dateFormat:'mm/dd/yy',
                minDate : checkInDate,
        });
    });
    }
    $('#tableBookingByBooker').on('page.dt', function () {
        checkInInit();
        checkOutInit();
    });

answered May 1, 2015 at 8:18

Ravi Bhalsod

1453 silver badges15 bronze badges

1 Comment

Ravi Bhalsod Over a year ago

Here function called but datepiker not applied on text box. i think issue in function call. alert com before datatable page is appear... Is there any solution that function called after datatable page is appeared ?

2 revs · Accepted Answer · 2024-08-02 16:15:00Z

0

Just Use below code :

          $(document).ready(function () {
            $("#tableId").DataTable($(".date").datepicker());                 
           });

edited Aug 2, 2024 at 16:15

community wiki

2 revs
Chandan Rajbhar

Collectives™ on Stack Overflow

input box datepicker not working in all pages of jQuery DataTables

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related