CODEWITHSUNDEEP
asp.net-mvcmicrosoft-edgebootstrap-datepicker
user2073183
user2073183

Reputation: 151

Bootstrap Date Picker No Longer Displaying in Microsoft Edge - MVC Application

I have an MVC application that has some odd quirks when viewing it in Microsoft Edge, in particular the date picker. The date picker is bootstrap. In the view, there is the following:

<div class="col-xs-3 col-md-2">
 @Html.EditorFor(m => m.Inputs.Management.AssessmentDate)
</div>

In the DateTime.cshtml editor template is the following:

 @model Nullable<DateTime>
 @{

DateTime dt = DateTime.Now;

if (Model != null)
{

    dt = (System.DateTime)Model;

}

@Html.TextBox("", String.Format("{0:dd-MMM-yyyy}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })
}

In the datepicker-ready.js (boostrap):

if (!Modernizr.inputtypes.date) {

$(function () {

    $(".datecontrol").datepicker();

});}

The model:

[Display(Name = "Management")] public ActivityViewModel Management { get; set; }

The field is not dispalying the date saved in the database. It is only displaying mm/dd/yyyy and a calendar icon (picker). When I view the source I see the following:

When I add the text "Using date template" to the editor template, I see the text for each of the date input fields so I know the editor template is being used.

When I change the value for type from "date" to "text" in the @Html.Textbox, the date displays, but the picker does not. The same when I change the code in the view as follows (From EditorFor to TextBoxFor and date format change):

@Html.TextBoxFor(m => m.Inputs.AssessmentDate, "{0:yyyy-MM-dd}", new { @class = "medium-input form-control datecontrol", @type = "date" })

The date will display as 04/24/2017 along with the calendar icon (picker). I click on the picker, the month and year at the top displays April 2017. When I select the 25th of April, the month at the top jumps to October and the year just displays 29. As soon as I click away from the field, the date changes to mm/dd/yyyy.

As well, the text, "Using date template" no longer displays so I know it's not using the editor template when I changed the input in the view. From what I've read (and I could be misunderstanding) Microsoft Edge has it's own datepicker so I'm wondering if there is conflict between that datepicker and the HTML 5 date picker? Thoughts?

NEW - In Answer to @Xudong Peng If I change

@Html.TextBox("", String.Format("{0:dd-MMM-yyyy}", dt), new { @class = 
 "medium-input form-control datecontrol", type = "date" })

to

 @Html.TextBox("", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })

in the DateTime.cshtml EditorTemplate the date displays as 01/29/2018. When clicking on date picker:

When I click outside of the datepicker, the date in the field reverts back to mm/dd/yyyy, but July 34 still displays as the month and year when I click the picker.

The scripts for bootstrap are bundled and loaded as part of the application startup i.e. BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/datepicker-ready.js"));

If I comment out the line for bootsrap-datepicker.js and datepicker-ready.js and run the code:

So it appears that commenting out the two lines regarding the datepicker now allows for the date to be displayed and a new date to be selected. I'm assuming that now it's utilizing the HTML5 date picker.

-Why is it not displaying as yyyy-MM-dd in the input field? -Where is the error from the console coming from? -How can I format the date to display as dd-MMM-yyyy? Would it be better to use the jQuery datepicker? I tried adding [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] to the ViewModel and changed the String.Format back to dd-MMM-yyyy, but it was a no go.

[Display(Name = "Adequacy:")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? AssessmentDate { get; set; }

Upvotes: 0

Views: 791

Answers (1)

Xudong Peng
Xudong Peng

Reputation: 2350

According to your description, I used part of the code you provided to test and refer to similar case. I found that the HTML5 date picker specification stipulates that the date must be in the format yyyy-MM-dd (ISO format).

And when the TextBox type is date, you will see message similar to this in the console: enter image description here

But I found that the format yyyy-mm-dd in the bootstrap datapicker works, and I think there is a difference in the definition content. A simple example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<div class="text-center">
    @model Nullable<DateTime>
    @{
        DateTime dt = DateTime.Now;
        if (Model != null)
        {
            dt = (System.DateTime)Model;
        }

        @Html.TextBox("testDate", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "medium-input form-control datecontrol", type = "date" })
    }
</div>
<script>
    //if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datecontrol").datepicker({
            format:'yyyy-mm-dd'
        });
    });
    //}
</script>

Therefore, I think there is indeed a conflict between the two date controls. If you need bootstrap datepicker, you can try to place the date icon at the end of the input [type='text'] through css style, otherwise you have to use the html5 date picker.

Upvotes: 0

Related Questions