升级到 MVC 3，现在日期选择器不起作用

发布于 2024-12-01 03:25:46 字数 1077 浏览 2 评论 0原文

在我之前的版本中，我使用了日期选择器，它可以默认为 null，如下所示；

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }) %>

现在我正在使用

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }))

这不起作用。当我单击日期字段时，我不再收到弹出窗口。

所以日期字段看起来像；

@Html.EditorFor(model => model.contract.GivenDate)

这是一个日期时间字段。在我的 _Layout 中我有；

$(function () { $(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' }); });

我也参考一下；

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js")" type="text/javascript"></script>

那么我做错了什么？

原文

In my previous version, I used a Date Picker which could default as null as follows;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%:Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }) %>

Now I am using

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }))

And this doesn't work.
When I click on a Date Field, I do not get a popup anymore.

So a date field looks like;

@Html.EditorFor(model => model.contract.GivenDate)

This is a DateTime field.
In my _Layout I have;

$(function () {
$(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' });
});

Also I reference;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js")" type="text/javascript"></script>

So what am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁人与我共长歌 2024-12-08 03:25:46

以下内容对我有用：

Views\Home\Index.cshtml内部：

@model MvcApplication10.Models.FooBar
<!DOCTYPE html>
<html>
    <head>
        <title>Test DateTime?</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js")" type="text/javascript"></script>
        <link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" />

        <script type="text/javascript">
            $(function ()
            {
                $(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' }); 
            });
        </script>

    </head>

    <body>
        @Html.EditorFor(model => model.GivenDate)
    </body>
</html>

Views\Shared\EditorTemplates\DateTime.cshtml内部：

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })
@* you'll notice I also removed an extra ) at the end of the last line *@

最后Models\FooBar.cs：

public class FooBar
{
    public DateTime? GivenDate { get; set; }
}

你能尝试一下看看是否有什么不同吗？

The following works for me:

Inside Views\Home\Index.cshtml:

@model MvcApplication10.Models.FooBar
<!DOCTYPE html>
<html>
    <head>
        <title>Test DateTime?</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js")" type="text/javascript"></script>
        <link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" />

        <script type="text/javascript">
            $(function ()
            {
                $(".datePicker").datepicker({ showOn: 'both', dateFormat: 'dd/mm/yy' }); 
            });
        </script>

    </head>

    <body>
        @Html.EditorFor(model => model.GivenDate)
    </body>
</html>

Inside Views\Shared\EditorTemplates\DateTime.cshtml:

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })
@* you'll notice I also removed an extra ) at the end of the last line *@

And finally Models\FooBar.cs:

public class FooBar
{
    public DateTime? GivenDate { get; set; }
}

Can you try this out to see if there's any differences?

回复收藏 0 原文

吲‖鸣 2024-12-08 03:25:46

当我的输入元素没有 ID 时，我在使用 jQuery 日期选择器时遇到了问题（我认为您会遇到这种情况，因为您在调用 Html.TextBox 时没有指定名称），也许尝试分配一个 ID？例如

@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker", id = "someUniqueDatePickerId" }))

I've had problems with the jQuery date picker when my input elements don't have an ID (which I see will happen to you here because you aren't specifying a name when calling Html.TextBox), maybe try assigning one? E.g.

@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker", id = "someUniqueDatePickerId" }))

回复收藏 0 原文

川水往事 2024-12-08 03:25:46

我使用 id 而不是类，我还包含日期差异函数，如果需要，可以将其删除

<script type="text/javascript">
$(document).ready(function () {
    $("#StartDate").datepicker();
    $('#EndDate').datepicker({
        onSelect: function () {
            var diff = dateDiff($('#StartDate').datepicker("getDate"), $('#EndDate').datepicker("getDate"));
            $('#DateDiff').html("Gece Sayısı:" + diff);
        }
    });

    function dateDiff(startDate, endDate) {
        if (endDate && startDate) return (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
        return "You must complete both dates!";
    }
});

 <div class="editor-label">
        @Html.LabelFor(model => model.StartDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.EndDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EndDate)
        <div id="DateDiff"></div>
        @Html.ValidationMessageFor(model => model.EndDate)
    </div>

i'm using id instead of classes i also included date diff function you can remove it if you want

<script type="text/javascript">
$(document).ready(function () {
    $("#StartDate").datepicker();
    $('#EndDate').datepicker({
        onSelect: function () {
            var diff = dateDiff($('#StartDate').datepicker("getDate"), $('#EndDate').datepicker("getDate"));
            $('#DateDiff').html("Gece Sayısı:" + diff);
        }
    });

    function dateDiff(startDate, endDate) {
        if (endDate && startDate) return (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
        return "You must complete both dates!";
    }
});

 <div class="editor-label">
        @Html.LabelFor(model => model.StartDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.EndDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EndDate)
        <div id="DateDiff"></div>
        @Html.ValidationMessageFor(model => model.EndDate)
    </div>

回复收藏 0 原文