jQuery UI datepicker不能正常工作与asp.net mvc

本文关键字：工作 asp mvc net datepicker UI 不能 常工作 jQuery | 更新日期: 2023-09-27 18:15:05

我在MVC工作。我在我的"日期"控件上使用了jQuery datepicker。调用datepicker的jquery代码如下:

    $(document).ready(function () {
     $('.date').datepicker({ dateFormat: "dd/mm/yy" });
     });

My DateTime Partialview is:

     @Html.TextBoxFor(x => x.Value, new { id = Model.Name, name = Model.Name, @class = "date", @readonly = true })

和我的DateTimeViewModel属性是:

    public string Name { get; set; }
   public DateTime? Value { get; set; }

我在一个表单中使用这个局部视图。一旦我填完表格并点击提交，焦点再次转到我的日期选择器，再次选择日期。它一次又一次地发生，我的表单无法提交。我在chrome上调试这个控件，我注意到日期无效，如下所示:-

    <input class="ff date hasDatepicker input-validation-error" data-val="true" data-val-date="The field Value must be a date." name="Fields[Lea_ex1_47].Value" readonly="True" type="text" value="" id="dp1369308655980">

编辑抱歉这么晚才说，但我现在也注意到了。我的日期选择器只记录每月1号到12号的日期。也就是说:在30/31天中，它将从1到12(验证为真)和其他13到31给出验证错误(验证为假)。

请告诉我为什么会发生这种情况?怎样才能去掉这个呢?

Thanks in advance.

jQuery UI datepicker不能正常工作与asp.net mvc

可能是这部分:

{ dateFormat: "dd/mm/yy" }

这不是。net显示日期的默认方式，所以jQuery可能无法解析它。您需要确保日期在月份之前，年份是两位数字。

Edit:在阅读了关于当一天大于12时控制失败的编辑后，这肯定是导致的。但是，我在下面提到的问题可能在你修改了日期格式之后仍然会导致问题。

其他潜在问题:

你正在设置一个readonly HTML属性，我不知道你为什么要这样做:

@readonly = true

这将不做任何事情或抑制日期选择器弹出。

最后，我注意到您手工设置了名称和ID:

id = Model.Name, name = Model.Name

这是Model.Value的编辑器，为什么要连接到Model.Name ?您页面中的其他内容是否具有相同的ID?是否有其他表单字段具有相同的名称?如果是这样，很可能会破坏客户机和服务器上的东西。你甚至不需要指定这些;MVC助手方法可以帮你完成。

怎么做:

首先，按照一些人的建议注释你的ViewModel，但要确保格式正确:

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/mm/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

这应该修复它，但也考虑从你的Razor代码完全删除id, name和readonly属性。

如果你正在使用HTML5， 可能帮助的一件事是使用EditorFor而不是TextBoxFor。这将导致它使用HTML5 DateTime输入类型。jQuery-UI在处理textbox时应该不会有任何问题，但也不会有什么坏处。

@Html.EditorFor(x => x.Value, new { @class = "date" })

使用UIHint轻松设置日期选择器

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Due Date")]
public Nullable<System.DateTime> Value{ get; set; }

添加 DateTime。cshtml此路径下的文件Shared/EditorTemplates

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" })
}
else
{
    @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<script type="text/javascript">
    $(function () {
        $("#@id").datepicker({
            dateFormat: "mm/dd/yy"
        });
    });
</script>

你可以试着这样注释你的视图模型属性:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

作为一种解决方案，我在提交时重新格式化了文本框日期选择器的值，以便它将格式化回mm/dd/yy。

$('#submit').submit(function() {
var dateTypeVar = $('#txtDateBirth').datepicker('getDate');
var oldFormat = $.datepicker.formatDate('mm/dd/yy', dateTypeVar);
                  $('#txtDateBirth').val(oldFormat);
});

何时回发MVC现在就能知道格式了。

希望能有所帮助

相关文章：