Question

我想在我的视图中制作一个日期选择器。所以我将TextBox更改为：

<div class="form-group">
    @Html.LabelFor(model => model.ProjectDeadline, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.ProjectDeadline, new { @class = "form-control datepicker", placeholder = "Enter date here..." })
        @Html.ValidationMessageFor(model => model.ProjectDeadline)
    </div>
</div>

我还将此jQuery代码添加到_Layout.cshtml：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker(); 
    });
</script>
@RenderSection("scripts", required: false)

但它不起作用，我看不到任何日期选择器。你能告诉我我做错了什么吗？我把jQuery代码放错了吗？感谢。

Answer 1

您的代码看起来很好。我只能想到两个失败原因。

1）您忘记将库包含在定义了datepicker功能的位置。确保页面中包含jQuery UI库。它应该在你包含jQuery之后加载，因为jQuery ui依赖于jQuery。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

我从jQuery cdn加载库。如果你的项目中有一个包，你可以用我的新行代替。

2）您的页面中有一些其他脚本错误，这会阻止javascript代码失败。打开浏览器控制台，看看是否有任何错误。

如果您没有任何脚本错误，并且您包含了jQuery UI库，则日期选择器将起作用。 Here是一个工作样本。：）

Answer 2

您的View代码似乎是正确的。请检查您的模型的日期时间属性，它应如下所示：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? MyDate { get; set; }

如何在Razor中使用jQuery代码

2 个答案: