Question

如何在我的mvc视图中使用datetime选择器。

EditorTemplate：Datetime.cshtml

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("dd/MM/yyyy"):"", new { @class = "datefield" })

Model : 
[Required]
public DateTime DateOfBirth { get; set; }.

Also jquery.ui.all.css is under my solution content>themes>base

以下是需要日期选择器的局部视图。

@model PersonalDetails`

` @ Html.LabelFor（model =＆gt; model.DateOfBirth） @ Html.EditorFor（model =＆gt; model.DateOfBirth，new {@placeholder =“Date of Birth”，@ class =“datefield”，@ type =“text”}）
@ Html.ValidationMessageFor（model =＆gt; model.DateOfBirth）

Here the date field is coming in the format specified in the Datetime editor template. But the calendor image is not coming.

Answer 1

假设您为jQuery datepicker设置了编辑器：

@Html.EditorFor(model => model.DateOfBirth, new { @placeholder = "Date Of Birth", @class = "datefield", @type="text" })

通过浏览器调试检查您的JS代码是否正常工作，您的datepicker代码应如下所示：

<script type="text/javascript">
$(document).ready(function () {
    $(".datefield").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        // other datepicker settings here as you want
    });
});
</script>

然后确保jQuery UI CSS文件包含在页面的Layout.cshtml内或head标签内，此步骤除日期编辑器外还应显示日历图像：

<link rel="stylesheet" href="~/Content/themes/base/jquery.ui.all.css" type="text/css">
<script src="~/Scripts/jQuery-[version].js" type="text/javascript">
<script src="~/Scripts/jQuery-ui-[version].js" type="text/javascript">

为了简化这些脚本和样式声明，我建议你学习MVC样式/脚本捆绑。

欢迎任何建议。

如何使用datetime选择器作为editortemplate

1 个答案: