MVC将jQuery DatePicker绑定到适当性

Question

首先，请原谅我的英语。我正在MVC中进行Web应用程序，并且在绑定jQuery DatePicker构造适当性的情况下遇到了问题。如果我将datepicker绑定到建模求合力（例如下面的代码中的"测试"），则一切都有效，但是我有一个包含我自己的类的模型，并且该类包含一个我需要绑定datepicker的属性，我不知道如何...

ViewModel

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

class in 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

您的代码不起作用的原因是@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类的输入。如果您希望其他settings到不同的datepickers，此方法将无法使用。

假设您想在 DateFrom datepicker上禁用周末，但允许在 DateTo datepicker上周末。然后，您必须将唯一的id s分配给两个输入，然后遵循方法2。

Answer 2

ID将以不同的方式渲染（如Adiga所述）。另外，如果您打算在屏幕上有多个datepickers，则最好使用CSS类代替ID，因此可以立即应用于所有ditepters。

请使用CSS类选择器

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