2017-07-18 45 views
0

取决于我使用的是什么主题 - 我的日期选择器不起作用,它正在使我无法正常工作。无法使DatePicker正常工作

我已经做了很多次,但得到了一个奇怪的反应:我可以让它在没有我的自定义引导主题的情况下工作,但是它不起作用。该页面加载为应该看起来如何,但日期选择器不起作用,但如果我删除我的主题它会。

我之所以这么说很奇怪,是因为我2天前在一个项目中使用了这个主题,并且它工作得很好,但现在它不适用于这个新项目。

@model WADTrackerApplication.Models.Weight 

@{ 
    ViewBag.Title = "Create"; 
} 
<html> 
<head> 

</head> 
<body> 
    <div class="container"> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Weight</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model._Weight, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model._Weight, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model._Weight, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.DateTime, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.DateTime, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.DateTime, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.AdditonalComments, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.AdditonalComments, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.AdditonalComments, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 
    </div> 

    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/moment.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script> 
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
    <script src="~/Scripts/bootstrap-datetimepicker.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('DateTime').datetimepicker({ 
       viewMode: 'years', 
       format: 'DD/MM/YYYY' 
      }); 
     }); 

    </script> 
</body> 

</html> 




<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 
+1

$( '日期时间')。 datetimepicker({?你需要指定它是类还是id吗? –

回答

1

JavaScript代码有一个错误选择$('DateTime')将选择DateTime类型的所有元素,这并不在您的标记存在。

添加描述性类或ID到要充当日期选择器输入:

@Html.EditorFor(model => model.DateTime, new { htmlAttributes = new { @class = "form-control date-picker" } }) 

然后使用你的JS是选择片段:

$(function() { 
    $('.date-picker').datetimepicker({ 
    viewMode: 'years', 
    format: 'DD/MM/YYYY' 
    }); 
}); 
+0

可惜这仍然不起作用 – user3042332

+0

http://imgur.com/a/cw8hM – user3042332

+0

即使当我输入“.datepicker()”它也不会甚至不会尝试自动完成它 – user3042332