Question

我使用bootstrap datapicker (bootstrap datapicker)并且它工作得很好，但是当我尝试在局部视图中使用它时不起作用。我在我的观点中使用它：

$(document).ready(function () {
        $('#datepicker').datepicker();

文档中的相同代码在我的部分准备好了，但没有用......

字段数据标签：

>  <div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth"
> data-date-format="mm/dd/yyyy">
>                 @Html.TextBoxFor(model => model.InicioServ, new { @class = "form-control input-sm add-on", id = "InicioServ" })
>             </div>

Answer 1

将以下jQuery放在基本视图中，而不是局部视图

<script>
      $(document).ready(function () { 
          $(document).on('focus', '#datepicker', function () {
              $(this).datepicker();
          });
      });
</script>

这将在动态加载部分视图和页面加载时起作用。

Answer 2

我认为问题在于你是通过id查找而dom只保留一个而忽略了第二个。

通过设置类名来添加日期选择器，如下所示：

$(document).ready(function () {
        $('.datepicker').datepicker();
});

...

<div class="input-append date" id="datepicker2" class="datepicker" data-date="dateValue: Customer.DateOfBirth"
 data-date-format="mm/dd/yyyy">
                 @Html.TextBoxFor(model => model.InicioServ, new { @class = "form-control input-sm add-on", id = "InicioServ" })
            </div>

我也会给他们不同的ID以保持它们分开，否则你可能会遇到dom问题。

Answer 3

如果您对different DatePicker感到满意，请查看TwitterBootstrapMVC，使用它来编写类似这样的内容，它就可以正常工作：

@Html.Bootstrap().TextBoxFor(x => x.Date).DatePicker()

部分视图中的jquery datepicker MVC 4

3 个答案: