MVC bind jQuery datepicker 繁荣

Question

首先，请原谅我的英语。我在 MVC 中做 Web 应用程序，并且在将 jQuery 日期选择器绑定到模型属性时遇到问题。如果我将日期选择器绑定到模型属性（如下面代码中的 "test"），一切正常，但我有一个包含我自己的 class 的模型，并且 class 包含一个属性我需要将日期选择器绑定到，我不知道如何...

视图模型

public class MainViewModel
{
    //ViewModel 
    public Filtr Fil { get; set; }
    public DateTime test { get; set; }

}

Class 在 ViewModel

public class Filtr
{
    [Display(Name = "Date from:")]
    public DateTime? DatumFrom { get; set; }

    [Display(Name = "Date to:")]
    public DateTime? DatumTo { get; set; }
}

Index.cshtml的一部分

@model aAKV.Models.MainViewModel 
.
.
.     
 <script>
    $(document).ready(function () {
        jQuery('#Fil.DateFrom').datetimepicker({
            lang: 'cs',
            formatDate: 'd.m.Y',
            formatTime: 'H:i',
            format: 'd.m.Y H:i',
            dayOfWeekStart: 1,
            step: 15,
            timepicker: true,
            mask: true
        });            

    });
</script>
}
@using (Html.BeginForm())
{

<div class="form-group">
    <div class="col-sm-3">

        @Html.LabelFor(Model => Model.Fil.DateFrom)
             @Html.TextBoxFor(model => model.Fil.DateFrom, new { @class = "date-picker" })
.
.
.

感谢您的帮助

Answer 1

ID 将以不同方式呈现（如 adiga 所解释）。此外，如果您计划在屏幕上显示多个日期选择器，最好使用 css class 而不是 ID，以便一次应用于所有日期选择器。

请改用 css class 选择器

jQuery('.date-picker').datetimepicker({

Answer 2

您的代码无法正常工作的原因是 @Html.TextBoxFor() 创建了一个以 Fil_DateFrom 作为 ID 的输入。不是 Fil.DateFrom。

您可以根据您的要求尝试任何选项：

1) 可以改成：$('#Fil_DateFrom').datetimepicker({

2) 但上面的 id 可能会使其他查看您的代码的人感到困惑，并使他们想知道 Fil_DateFrom 的来源。因此，您可以像这样为输入分配一个唯一的 id：

@Html.TextBoxFor(model => model.Fil.DateFrom, new { id="date-from", @class ="date-picker"})

然后在你的脚本中$('#date-from').datetimepicker({

3) 另一种选择是根据 class:

进行定位

$('.date-picker').datetimepicker({：这会将 datepicker 添加到所有页面上带有 date-picker class 的输入。如果您想要不同的 settings 到不同的 datepickers，此方法将不起作用。

假设您想在 DateFrom 日期选择器上禁用周末，但在 DateTo 日期选择器上允许周末。然后你必须为两个输入分配唯一的 ids 并遵循方法 2.

MVC bind jQuery datepicker 繁荣

MVC bind jQuery datepicker to properity

asp.net-mvc

jquery-ui-datepicker