javascript - 如果使用 jquery timepicker，则无法从模式弹出窗口发布表单

Question

我正在使用 daypilot lite 创建事件日历。我正在关注这个tutorial在 ASP.NET MVC 5 中创建应用程序。

当我单击日历时，例如 30/04/2015 02:00 PM - 30/04/2015 03:00 PM，将显示弹出表单。在弹出窗口中，我使用 jquery datepicker和 jquery timepicker在开始和结束字段上。这是描述我所做的事情的图片和代码:

索引.cshtml:

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    BusinessBeginsHour = 8,
    BusinessEndsHour = 19,
    ViewType = ViewType.Day,
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)",
    EventClickHandling = EventClickHandlingType.JavaScript,
    EventClickJavaScript = "edit(e)",
    EventMoveHandling = EventMoveHandlingType.Notify,
    EventResizeHandling = EventResizeHandlingType.Notify,
    EventDeleteHandling = EventDeleteHandlingType.CallBack
})

<script type="text/javascript">
    function create(start, end) {
        var m = new DayPilot.Modal();
        m.closed = function () {
            if (this.result == "OK") {
                dp.commandCallBack('refresh');
            }
            dp.clearSelection();
        };
        m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
    }
</script>

创建.cshtml:

@model Calendar.ViewModels.CreateEventViewModel

<link href="@Url.Content("~/Content/jquery-ui.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.timepicker.css")" />
<script src="@Url.Content("~/Scripts/jquery.timepicker.min.js")"></script>

@using (Html.BeginForm())
{
    <fieldset>
        <legend>Event Details:</legend>
        <table>
            <tr>
                <td>
                    <label for="name">Event Name</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all" } })
                    @Html.ValidationMessageFor(model => model.name, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="startdate">Start</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.startdate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.starttime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.startdate, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="enddate">End</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.enddate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.endtime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.enddate, "", new { @class = "" })
                </td>
            </tr>
        </table>
    </fieldset>
    <br />
    <div style="text-align: right">
        <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">Save</button>
        <a href="javascript:close()">Cancel</a>
    </div>
}

<script>
    $(function () {
        $(".datepicker").datepicker({
            dateFormat: "dd/mm/yy"
        });
        $(".timepicker").timepicker({
            "forceRoundTime": true,
            "timeFormat": "h:i A"
        });

        $("form").submit(function () {
            var f = $("form");
            if (f.valid()) {
                $.post(f.action, f.serialize(), function (result) {
                    close(eval(result));
                });
            }
            return false;
        });
    });

    function close(result) {
        if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
            parent.DayPilot.ModalStatic.close(result);
        }
    }
</script>

CreateEventViewModel.cs

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

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

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime starttime { get; set; }

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

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime endtime { get; set; }
}

如果我单击“保存”按钮，它总是将焦点转移到开始时间文本框。我已经使用 F12 开发人员工具进行了调试，没有错误或后期操作。如果我不使用jquery timepicker，问题就解决了。

我做错了什么？

Answer 1

我认为是你的类中的DataFormatString，修改它如下:

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

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

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime starttime { get; set; }

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

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime endtime { get; set; }
}

我刚刚将 starttime 和 endtime 的 {0:HH:mm} 小时格式更改为 {0:t}