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.

Shyju · Accepted Answer · 2016-01-02 18:36:27Z

5

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.

answered Jan 2, 2016 at 18:36

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pjdupreez Over a year ago

Nice! I will play around with this. I have commented out the max-width attribute and the glyphicon is now next to the input, although they now take up the whole row. I will play around with it.

pjdupreez · Accepted Answer · 2016-01-03 17:01:03Z

5

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>

answered Jan 3, 2016 at 17:01

pjdupreez

7171 gold badge8 silver badges21 bronze badges

Comments

MarwaAhmad · Accepted Answer · 2016-01-02 21:09:46Z

3

Would you try to put an attribute:

[DataType(DataType.DateTime)]

public DateTime EntryDateTime {get; set;}

and comment the JS script?

Example

answered Jan 2, 2016 at 21:09

MarwaAhmad

89410 silver badges21 bronze badges

4 Comments

pjdupreez Over a year ago

thanks for the link, have an upvote. I had to add the [DisplayFormat] attribute to my model

pjdupreez Over a year ago

ok, now it stopped working again for some reason. any idea on what else i could try? It only happens when the datepicker is activated on the input

MarwaAhmad Over a year ago

is there any browser's errors?; F12 key to see them.

pjdupreez Over a year ago

can't remember, but got it working, thanks. only annoyance is that commenting out the css max-width for the inputs, causes the input to be 100% (obviously) and the calendar glyph is right next to it. as soon as I set a size for inputs, there is a space between the glyph and the input.

Rob · Accepted Answer · 2017-08-31 10:16:32Z

1

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.

edited Aug 31, 2017 at 10:16

Rob♦

27.5k16 gold badges89 silver badges103 bronze badges

answered Aug 31, 2017 at 10:11

Andy A.

313 bronze badges

1 Comment

pjdupreez Over a year ago

Yeah, that is not a bad option. Lately, I have been using '.ToShortDateFormat()'. Let the server sort it out

Shirley Barker · Accepted Answer · 2018-02-21 16:17:48Z

1

    <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>

answered Feb 21, 2018 at 16:17

Shirley Barker

111 bronze badge

1 Comment

Shirley Barker Over a year ago

This worked great for me after fiddling around and searching for quite a while.

Collectives™ on Stack Overflow

Bootstrap DateTimePicker in ASP.Net MVC 5

5 Answers 5

1 Comment

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related