如何在MVC中使用DatePicker？

Question

我像这样表tblEmp结构：

Id          int
Name    nvarchar
NIK         int
Point   numeric
JointDate   date

并且我希望使用datepicker控件输入字段jointDate，因此它可以按类型输入日期，或者我可以从日期组件弹出窗口中选择，该怎么做？

这是createEmp.cshtml中的代码：

@model i_insurance.Models.EmpModel.Emp

@{
    ViewBag.Title = "Create New Employee";
}

<h2>Create User</h2>

@*<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*@

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

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

    <fieldset>
        <legend>Employee</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.NIK)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NIK)
            @Html.ValidationMessageFor(model => model.NIK)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Point)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Point)
            @Html.ValidationMessageFor(model => model.Point)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.JointDate)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.JointDate, new { @class = "datepicker" })
            @Html.ValidationMessageFor(model => model.JointDate)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

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

谢谢。

Answer 1

您可以配置jQuery UI datepicker

 @Html.TextBoxFor(model => model.JointDate, new{@class="date-picker"})

然后

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

或者

 @Html.EditorFor(m=>m.JointDate,"DateTimeEditor")

的 DateTimeEditor.cshtml 的

@model DateTime?
@{
String modelValue = "";
if (Model.HasValue)
 {
    if (Model.Value != DateTime.MinValue)
    {
        modelValue = Model.Value.ToShortDateString();
    }
 }
}

@Html.TextBox("", modelValue, new { @class = "date-picker"})