Question

首先，请原谅我的英语。我在MVC中进行Web应用程序，并且将jQuery datepicker绑定到Model特性时遇到问题。如果我将datepicker绑定到Model特性（如下面的代码中的“test”），一切正常，但我有一个包含我自己的类的Model，并且该类包含一个我需要绑定datepicker的属性，我不知道如何......

ViewModel

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

}

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类而不是ID，以便一次性应用于所有。

请改用css类选择器

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类的输入。如果您想要不同的settings到不同的datepickers，则此方法无效。

假设您要在DateFrom datepicker上禁用周末，但允许DateTo datepicker上的周末。然后，您必须为两个输入分配唯一的id，并按照方法2进行操作。

MVC将jQuery datepicker绑定到正确性

2 个答案: