如何使用datetime选择器作为editortemplate-Java 学习之路

-3

如何在我的mvc视图中使用日期时间选择器 .

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

这是需要datepicker的局部视图 .

@model PersonalDetails`

`@Html.LabelFor（model => model.DateOfBirth）@ Html.EditorFor（model => model.DateOfBirth，new {@placeholder = "Date Of Birth"，@ class = "datefield"，@ type = "text"}）
@ Html.ValidationMessageFor（model => model.DateOfBirth）

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

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样式/脚本捆绑 .

欢迎任何建议 .

回复于 2024-04-29T04:29:18+08:00

如何使用datetime选择器作为editortemplate

1 回答

相关问题