如何将EditorFor转换为DATETIME选择器？

Question

我希望DateFrom和DateTo的EditorFor字段成为日期时间选择器（而不是datepicker）。我成功创建了一次，但丢失了我的文件。我不记得我是否使用了EditorFor或TextBoxFor。

另外，如何让全名编辑器只读？我尝试了stackoverflow的链接，但该字段仍然可以编辑。

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

    <fieldset>
        <legend>Approval</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FullName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FullName)
            @Html.ValidationMessageFor(model => model.FullName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DateFrom)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DateFrom, new { @class="date", type = "datetime-local"})
            @Html.ValidationMessageFor(model => model.DateFrom)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DateTo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DateTo, new { @class="datepicker", type = "datetime-local"})
            @Html.ValidationMessageFor(model => model.DateTo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>


        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

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

Answer 1

EditorFor或TextboxFor任何工作只需要为datetimepicker添加正确的js文件和初始化程序。

您可以使用

@Html.TextBoxFor(m => m.FullName, new { @readonly = "readonly" ,@id="datepicker" })

或

@Html.EditorFor(m => m.FullName, new { @readonly = "readonly" ,@id="datepicker" })

你需要三个js文件

1. jquery的

2. jquery-ui和

3. Jquery datetimepicker addon

你还需要2个css文件

1. jquery ui

2. Jquery datetimepicker addon

要清楚，请看下面的代码段。

＆＃13;
＆＃13;
$(function() {
  $("#datepicker").datetimepicker({
             changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            dateFormat: 'mm/dd/yy',
            controlType: 'select',
            timeFormat: 'hh:mm TT',
       
            });
});
＆＃13;
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon@1.6.3/dist/jquery-ui-timepicker-addon.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon@1.6.3/dist/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>


<p>Date and Time:
  <input type="text" readonly=true id="datepicker">
</p>
＆＃13;
＆＃13;
＆＃13;