locked
#datepicker Odd behavior in different browsers RRS feed

  • Question

  • User1416480938 posted

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    $(function () { $("#datepicker").datepicker(); $("#anim").on("change", function () { $("#datepicker").datepicker("option", "showAnim", $(this).val()); }); });

    When this is rendered in chrome the datepicker looks as specified in Jquery reference. When it is rendered in Edge I get this odd calendar picker..... Works OK but my question is why are they rendered differently in the 2 browsers?

    Edge Calendar

    Wednesday, March 7, 2018 2:45 PM

Answers

All replies

  • User-1838255255 posted

    Hi 1StormChaser43,

    According to your description, I tested it in my side, i found the calendar in the chrome is same as in the edge, please check the following screenshot:

    Here is my test code:

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
                $("#anim").on("change", function () {
                    $("#datepicker").datepicker("option", "showAnim", $(this).val());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    Date:
                    <input type="text" id="datepicker" />
                </p>
            </div>
        </form>
    </body>

    I hope you could post the complete code for us to test then upload the screenshot in this site https://postimages.org/, finally, please paste your image url(paste your image) in this thread. 

    Best Regards,

    Eric Du 

    Thursday, March 8, 2018 6:21 AM
  • User1416480938 posted

    This is what I receive in Edge: https://postimg.org/image/dn1osz4sz/

    In Chrome my response equals yours above.....

    This is my code:

    Thanks in Advance. 

     //   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    //    <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
                $("#anim").on("change", function () {
                    $("#datepicker").datepicker("option", "showAnim", $(this).val());
                });
            });

    <body>

    <div class="row">
    <div class="col-lg-4">
    <br />
    <h2>Storm Command Center </h2>
    </div>
    <div class="col-lg-8">
    <br />
    <h2>No Current Severe Storm Warnings... </h2>
    </div>
    </div>

    <div class="container-fluid">

    <div class="row">
    <div class="col-lg-4">
    <h2>Storm Filters...</h2>
    <p>
    Make selections for map or simply hit Map it for your default selections..
    ..
    </p>
    <div class="well" align="left">
    <style>
    .well {
    background-color: rgba(95, 115, 196, 0.46);
    }
    </style>
    <form action="/LocationStatic/MapParameters" method="POST" name="MapForm">

    <input type="radio" id="TimeFrame" name="TimeFrame" value="ActiveStorms"> Active Storms
    <input type="radio" id="TimeFrame" name="TimeFrame" value="Today"> Today's Storms<br><br />
    <input type="radio" id="TimeFrame" name="TimeFrame" value="Date">Storm by Date<br>
    <input type="date" id="datepicker" name="StormDate" value=" " size="30"><br>
    <input type="radio" id="DateMath" name="DateMath" value="="> =
    <input type="radio" id="DateMath" name="DateMath" value=">"> = OR ><br><br />
    <input type="radio" id="StormType" name="StormType" value="T"> Tornado Warning<br>
    <input type="radio" id="StormType" name="StormType" value="S"> Severe Thunderstorm Warning<br>
    <input type="radio" id="StormType" name="StormType" value="B"> Both<br />

    <br>

    Thursday, March 8, 2018 2:09 PM
  • User475983607 posted

    You are using the HTML5 date picker not the jQuery datepicker.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

    The DataType model attribute affects the type attribute or it can be set manually.   Remove the attribute or the type="date" attribute if the jQuery datepicker is desired.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 8, 2018 9:07 PM