locked
MVC 4 - Datepicker doesn't work in IE 11 browsers RRS feed

  • Question

  • User-1256377279 posted

    Hello Guys,

    I am new to MVC 4, I have started with basic example and application is working fine, My query is DatePicker doesn't work in IE 11 and Firefox but it works fine in Chrome. Does anybody can help me.

    Below is my Code

    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
            [DataType(DataType.Date)]
            public DateTime Date { get; set; }
    <div class="editor-label">
                @Html.LabelFor(model => model.Date)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Date)
                @Html.ValidationMessageFor(model => model.Date)
            </div>
    


    Thanks in Advance

    Shabbir

    Wednesday, April 16, 2014 8:01 AM

Answers

  • User281315223 posted

    The DatePicker feature isn't an MVC-specific feature at all, the EditorFor() HTML Helper reads the DataType attribute that you have specified on your property and automatically adds the type of "date" in (which works just fine for the few browsers that support it).

    A newer version of jQuery itself will not really make any difference as the issue is related to browsers (if the browser doesn't support the date attribute, it will not work at all). However, if you use a jQuery-based solution, you could select all <input> elements that have their type set to "date" as seen below which should provide a fairly cross-browser solution to your issue :

    <!DOCTYPE html>
    <html>
    <head>
    <!-- jQueryUI Stylesheet (from CDN) -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- jQueryUI Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <meta charset=utf-8 />
    <title>Example</title>
      <!-- Your Script -->
      <script type='text/javascript'>
        $(function(){
            // This will apply the datepicker to all input elements of the date type and then it will remove the date attribute to avoid jQuery / browser conflicts
            $("input[type='date']").datepicker().attr('type','text');
        });
      </script>
    </head>
    <body>
      <!-- Example input being targeted -->
      <input type='date' />
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 16, 2014 9:46 AM

All replies

  • User281315223 posted

    If you are attempting to use the default type="date" attribute within <input> elements (you can check your source for this), you'll see that IE11 does not currently support it and the only major browsers that currently do are Google Chrome, Opera, Android and Blackberry.

    If you want a more complete solution that works across multiple browsers, you may have to consider using the jQueryUI DatePicker (or some other Javascript-based date picking component) as seen in the example below :

    <!DOCTYPE html>
    <html>
    <head>
    <!-- jQueryUI Stylesheet (from CDN) -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- jQueryUI Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <meta charset=utf-8 />
    <title>Example</title>
      <!-- Your Script -->
      <script type='text/javascript'>
        $(function(){
            $("#datefield").datepicker();
        });
      </script>
    </head>
    <body>
      <!-- Example input being targeted -->
      <input id='datefield' />
    </body>
    </html>

    Wednesday, April 16, 2014 8:28 AM
  • User-1256377279 posted

    Hi Mike, thanks for your reply but i am using Windows 7Smile

    Wednesday, April 16, 2014 9:25 AM
  • User-1256377279 posted

    Thanks Rion for Alternative solution, As you said default type="date" attribute within <input> doesn't work in IE 11, is there any way we can update jquery and make it work for IE11 as well, It's a shame it works for chrome and not for IE 11 and firefox. Datepicker feature is so easy to use in MVC if i use the Jquery you mentioned than what is the advantage of using MVC , I hope understand what i am try to say.

    Many Thanks,
    Shabbir

    Wednesday, April 16, 2014 9:29 AM
  • User281315223 posted

    The DatePicker feature isn't an MVC-specific feature at all, the EditorFor() HTML Helper reads the DataType attribute that you have specified on your property and automatically adds the type of "date" in (which works just fine for the few browsers that support it).

    A newer version of jQuery itself will not really make any difference as the issue is related to browsers (if the browser doesn't support the date attribute, it will not work at all). However, if you use a jQuery-based solution, you could select all <input> elements that have their type set to "date" as seen below which should provide a fairly cross-browser solution to your issue :

    <!DOCTYPE html>
    <html>
    <head>
    <!-- jQueryUI Stylesheet (from CDN) -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- jQueryUI Reference (from CDN) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <meta charset=utf-8 />
    <title>Example</title>
      <!-- Your Script -->
      <script type='text/javascript'>
        $(function(){
            // This will apply the datepicker to all input elements of the date type and then it will remove the date attribute to avoid jQuery / browser conflicts
            $("input[type='date']").datepicker().attr('type','text');
        });
      </script>
    </head>
    <body>
      <!-- Example input being targeted -->
      <input type='date' />
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 16, 2014 9:46 AM