CODEWITHSUNDEEP
jquerydatatables
Bishan
Bishan

Reputation: 15702

jQuery date format not work on table column

I'm populating table from data in database as below.

<tbody>
    <c:forEach items="${requestScope.expenses}" var="expense">
        <tr>
            <td style="width: 5%;"><a
                href="expense_manage?expense_id=${expense.expenseId}"
                class="btn btn-outline btn-primary">Edit</a></td>
            <td id="date">${expense.expenseDate}</td>
            <td>${expense.expenseDesc}</td>
            <td>${expense.expenseAmount}</td>
            <td>${expense.comment}</td>
            <td style="width: 10%;">
                <button type="button"
                    onclick="ConfirmDelete('id=${expense.expenseId}','removeExpense')"
                    class="btn btn-outline btn-danger">Delete</button></td>
        </tr>
    </c:forEach>
</tbody>

I need to format date display in above table as yyyy-MM-dd. so i added this.

<script src="js/jquery-dateFormat.min.js"></script>

    <script>    
        jQuery(function() {
            var shortDateFormat = 'yyyy-MM-dd';

            jQuery("#date").each(
                    function(idx, elem) {
                        if (jQuery(elem).is(":input")) {
                            jQuery(elem).val(
                                    jQuery.format.date(jQuery(elem).val(),
                                            shortDateFormat));
                        } else {
                            jQuery(elem).text(
                                    jQuery.format.date(jQuery(elem).text(),
                                            shortDateFormat));
                        }
                    });
        });
    </script>

But it changes only date in first row. Others are not changing.

data table

How can i fix this ?

Upvotes: 0

Views: 1359

Answers (1)

Nicolas Henrard
Nicolas Henrard

Reputation: 843

The ID is unique in a document. To group elements, use classes.

Replace 

<td id="date">${expense.expenseDate}</td>

by

<td class="date">${expense.expenseDate}</td>

and replace

jQuery("#date").each(

by

jQuery(".date").each(

Upvotes: 1

Related Questions