0

我终于让 eonasdan bootstrap 3 datetimepicker 在 MVC 5 的表单视图上工作。但是，我很难让它在列表视图上工作。下面是我得到的代码。在列表视图中，单击日历字段不会显示日历。我错过了什么？有什么帮助吗？

表单视图：

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

下面是上面for循环生成的html

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

根据 Sam 的建议，我将上面的代码更改为此。但是当我单击“激活日期”文本框时，它仍然没有弹出日历。

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

生成的 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>
4

1 回答 1

0

方括号是 id 的无效字符：HTML 中 id 属性的有效值是什么？

您可以尝试转义 datetimepicker 选择器中的方括号。

解决此问题的另一种方法是为每个 datetimepicker 分配相同的类（例如 class="datetimepicker"），然后调用 $(".datetimepicker").datetimepicker();，然后您只需调用初始化每个选择器。

于 2015-04-14T01:34:09.920 回答