I have a Bootstrap Modal in ASP.Net with MVC 5 which I use to edit an entry on a FullCalendar javascript plugin.

\_Edit.cshtml:

```
@model Models.CalendarEntry

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Edit Calendar Entry</h4>
</div>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="modal-body">

        <div class="form-horizontal">
            <h4>@Model.Title</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.CalendarEntryId)
            @Html.HiddenFor(model => model.PostId)

            <div class="form-group">
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.EntryDateTime, htmlAttributes: new {  @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="input-group" id="datetimepicker">
                        @Html.EditorFor(model => model.EntryDateTime, new { htmlAttributes = new { @class = "form-control" } })
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                    @Html.ValidationMessageFor(model => model.EntryDateTime, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Length, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.EntryStatus, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.EntryStatus, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.EntryStatus, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" type="button">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
    </div>

    <script>
        $(document).ready(function ()
        {
            $("#datetimepicker").datetimepicker();
        });
    </script>
}

```

For some reason two things are happening that I cannot figure out why.

Firstly, the `glyphicon-calendar` does not sit next to the input:
[![input and glyphicon](https://i.stack.imgur.com/TDSHs.png)](https://i.stack.imgur.com/TDSHs.png)

Secondly, when the Modal Form load, all the other fields except for the datetime field gets populated with data, until I click the calendar glyphicon, then the datetime field gets populated with the current date and time. The value from the model never gets displayed.

Web interfaces are not my forté and would appreciate any assistance.