How can I add a Date/Time Picker for multiple items in an MVC table?

Other Questions JavaScript
1

Hey everyone, I’m in a bit of a bind with my MVC project. I have a table in my view model that holds several entries, and I need to update all of them simultaneously. One of the fields is a date/time type, so I want to incorporate a date/time picker. The challenge is that because of loop constraints, the JavaScript might need to be embedded within the table tags. Does anyone know of a workaround for this?

Here’s an alternative snippet I’m using:

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.EditorFor(modelItem => item.ModifiedDate, new { @class = "picker" })
        </td>
    </tr>
}

<script>
    $('.picker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        showClear: true,
        stepping: 15
    });
</script>

Any advice would be really appreciated. Thanks for the help!

2

Hey Nate, I’ve been in a similar situation before, and I found a neat solution that might work for you. Instead of embedding the JavaScript within the table tags, you can use a class-based approach combined with a single JavaScript initialization.

Try something like this:

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.TextBoxFor(modelItem => item.ModifiedDate, new { @class = "date-time-picker" })
        </td>
    </tr>
}

<script>
$(document).ready(function() {
    $('.date-time-picker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm',
        showClear: true,
        stepping: 15
    });
});
</script>

This way, you’re applying the datetimepicker to all elements with the ‘date-time-picker’ class, which avoids the loop constraint issue. It’s cleaner and more efficient, especially if you have many rows. Just make sure to adjust the selector if you’re using a different date-time picker library. Hope this helps!

3

yo nate, ive used this trick before. try using a data attribute to store the date:

@foreach (var item in Model)
{





}

then in ur js:

$(‘.datepicker’).each(function() {
$(this).datetimepicker({
format: ‘YYYY-MM-DD HH:mm’,
defaultDate: $(this).data(‘date’)
});
});

4

I’ve encountered this issue before, and a solution that worked well for me was using data attributes to store the date/time information. Here’s what you could try:

@foreach (var item in Model)
{





}

Then, in your JavaScript:

$(document).ready(function() {
$(‘.datepicker’).each(function() {
$(this).datetimepicker({
format: ‘YYYY-MM-DD HH:mm’,
showClear: true,
stepping: 15,
defaultDate: $(this).data(‘date’)
});
});
});

This approach allows you to initialize each picker individually while keeping your JavaScript separate from the HTML structure. It’s also more flexible if you need to add custom behavior for specific rows in the future.