Bootstrap DateTimePicker in ASP.Net MVC 5

Question

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:

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.

Answer 1

When you create a new MVC project, it comes with a default css file(Site.css) which has some predefined css styles in it. By default, it has input field's max-width defined as 280px . That is the reason, your input groups are not working as expected.

If you remove/make adjustments to this css class in your ~/Content/Site.css , You css problem will be resolved.

Answer 2

turns out, that I needed to set options for the datetimepicker, more specifically, a default value it would seem like:

 <script>
        $(document).ready(function ()
        {
            $("#datetimepicker").datetimepicker(
                {
                    defaultDate: '@Model.EntryDateTime',
                    showTodayButton: true,
                    format: 'YYYY-MM-DD HH:mm',
                    showClose: true,
                    showClear: true,
                    toolbarPlacement: 'top',
                    stepping: 15
                });
        });
    </script>

Answer 3

Would you try to put an attribute:

[DataType(DataType.DateTime)]

public DateTime EntryDateTime {get; set;}

and comment the JS script?

Example

Answer 4

Another quick solution is to also format the date like this in your javascript:

defaultDate: '@Model.EntryDateTime.ToString("yyyy-MM-dd HH:mm")'

The solution of using the [DisplayFormat] as an attribute is just as valid if not a better solution.

Answer 5

    <div class="container">
        <div class="row">
            <div class='col-md-12'>
                <div class="form-group">
                    <span col-sm-6> @Html.Label("Date of Birth", htmlAttributes: new { @class = "control-label col-md-2" })</span>
                    <div class='input-group date col-sm-3' id='datetimepicker1'>

                            @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar"></span>
                                                    </span>

                        @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
    </div>