bootstrap 3 Datetimepicker in a list

Question

I finally got eonasdan bootstrap 3 datetimepicker to work on a form view of MVC 5. However, I am having trouble to get it to work on list view. Below is the codes I got. On the list view, clicking on the calendar field doesn't bring up the calendar. What am I missing? Any help?

Form View:

<div class="input-group date">
     @Html.TextBoxFor(m => m.ActivateDate, new { @class = "form-group" })
</div>
<script type="text/javascript">
     $(function () {
           $('#ActivateDate').datetimepicker();
     });
</script>

List View:

@for (int i = 0; i < Model.Count; i++)
{
    <tr class="orderedrow">
        <td>@Html.ActionLink(Model[i].ServiceName, "Edit", new { Model[i].ServiceID })</td>
        <td>
            <div class="input-group date">
                @Html.TextBoxFor(model => model[i].ActivateDate, new { @class = "form-group" })
            </div>
            <script type="text/javascript">
                  $(function () {
                       $('#[@i].ActivateDate').datetimepicker();
                  });
            </script>
        </td>
    <tr>
}

Below is the html generated by the for loop above

<td>
    <div class="input-group date">
         <input class="form-group" data-val="true" data-val-date="The field Activate Date must be a date." data-val-required="The Activate Date field is required." name="[12].ActivateDate" type="text" value="2/25/2015 12:00:00 AM" />
    </div>
    <script type="text/javascript">
        $(function () {
            $('#[12].ActivateDate').datetimepicker();
        });
    </script>
</td>

Per Sam's suggestion I changed the above code to this. But it still doesn't popup the calendar as I click on the Activate Date textbox.

<script type="text/javascript">
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker();
    });
</script>

@for (int i = 0; i < Model.Count; i++)
{
    <tr class="orderedrow">
        <td>@Html.ActionLink(Model[i].ServiceName, "Edit", new { Model[i].ServiceID })</td>
        <td>
            <div class="datetimepicker date">
                @Html.TextBoxFor(model => model[i].ActivateDate, new { @class = "form-group" })
            </div>
        </td>
    <tr>
}

Generated Html

<tr>
<td><a href="/someurl/admin?ServiceID=26">Cognos 10</a></td>
<td>
    <div class="datetimepicker date">
        <input class="form-group" data-val="true" data-val-date="The field Activate Date must be a date." data-val-required="The Activate Date field is required." name="[34].ActivateDate" type="text" value="2/25/2015 12:00:00 AM" />
    </div>
</td>
</tr>

Do you have any console errors? I'm assuming you've included `moment` and the datepicker's js and css. — Eonasdan, Apr 21 '15 at 13:24

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

Square brackets are invalid characters for an id: What are valid values for the id attribute in HTML?

You could try escaping the square brackets in your datetimepicker selector.

Another way you could work around this issue is by assigning the same class to each datetimepicker (say class="datetimepicker"), then calling $(".datetimepicker").datetimepicker();, then you only need to make one call to initialize every picker.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 14 '15 at 01:34

Sam

1
2

Thanks for pointing out the ID issue. I also made some changes per your suggestion to move the jquery code to the section and calling $(".datetimepicker").datetimepicker(); but there's still no calendar pop-up like in the form view. Any other suggestion? – T L Apr 14 '15 at 17:28
http://eonasdan.github.io/bootstrap-datetimepicker/#no-icon-input-field-only There he puts his selector on the actual input element. Also check the console and make sure you're not getting any javascript errors. – Sam Apr 14 '15 at 22:13
I tried that too. I had the code to generate the . Then the javascript goes $('#ActivateDate_0').datetimepicker(); but that still does not work. I'm now confused how the bootstrap datetimepicker works. – T L Apr 14 '15 at 22:19

bootstrap 3 Datetimepicker in a list

1 Answers1