Question

我有一个MVC应用程序，我使用jQuery datepicker作为编辑器模板。出于某种原因，当我退出可编辑的日期字段时，它会默认为今天的日期。

模型元素（是元数据类型）：

[DisplayName("Expiration Date")]
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime expirationDate { get; set; }

我的DateTime编辑模板是：

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
   @Html.TextBox("", String.Format("{0:d}", Model.Value), new { @style = "width:75px;" })
}
else
{
    @Html.TextBox("", null, new { @style = "width:75px;" })
}

@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}

<script type="text/javascript">
    $('#@id').datetimepicker({
        format: 'm/d/Y',
        timepicker: false,
        required: false
    });
</script>

如果有人试图清除数据或意外进入该字段并试图离开，我怎样才能使该字段保持为空？我不希望表单上有任何“清除”按钮。

整个渲染的html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <link href="/Content/jquery-ui-1.10.4.custom.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/jquery.datetimepicker.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.7.1.js"></script>
    <script src="/Scripts/respond.js"></script>

    <script src="/Scripts/jquery-1.11.0.js"></script>
    <script src="/Scripts/jquery.dataTables.js"></script>
    <script src="/Scripts/jquery.datetimepicker.js"></script>

    <script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>

</head>
<body>

    <header>
        <div id="titleBar">
            <div id="titleLeft">
                <div id="logoContainer"><a class="logo" href="/Associate"> </a></div>
            </div>
            <div id="titleCenter">
                <a href="/Associate">Employee Hourly Tracking</a>    
            </div>
            <div id="titleRight">
                Welcome <span id="welcomeContainer">RDMS\fred</span>
            </div>
        </div>
        <nav>
            <ul id="mainNavMenu">
                <li><a href="/Associate">Associate</a></li>
                <li><a href="/">Manager</a></li>
                <li><a href="/Accounting">Accounting</a></li>
            </ul>
        </nav>
    </header>
    <div id="mainContent">



<div id="twoColumn">
    <div id="contentContainer">


<form action="/Manager/ManagerCreate" method="post">    <fieldset>
        <legend>Manager</legend>

        <table border="0">
            <tr>
                <td class="editor-label"><label for="managerNumber">Manager</label></td>
                <td class="editor-label"><input class="text-box single-line" data-val="true" data-val-number="The field Manager must be a number." data-val-required="Supervisor is required" id="managerNumber" name="managerNumber" type="number" value="fred" /> <span class="field-validation-valid" data-valmsg-for="managerNumber" data-valmsg-replace="true"></span></td>
            </tr>
            <tr>
                <td class="editor-label"><label for="expirationDate">Expiration Date</label></td>
                <td class="editor-field"><input data-val="true" data-val-date="The field Expiration Date must be a date." id="expirationDate" name="expirationDate" style="width:75px;" type="text" value="" />


<script type="text/javascript">
    $('#expirationDate').datetimepicker({
        format: 'm/d/Y',
        timepicker: false,
        required: false
    });
</script>
 <span class="field-validation-valid" data-valmsg-for="expirationDate" data-valmsg-replace="true"></span></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#" onclick="$(this).parents('form').submit();">Create</a></td>
            </tr>
        </table>

    </fieldset>
</form>
<div>
    <a href="/Manager/ManagerListing">Back to List</a>
</div>

</div>

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>



</body>
</html>

jQuery datepicker保持默认为今天

0 个答案: