#datepicker Odd behavior in different browsers

Reply

Member

11 Points

#datepicker Odd behavior in different browsers

Mar 07, 2018 02:45 PM|1StormChaser43|LINK

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

Reply

Eric Du

Contributor

6720 Points

2715 Posts

Re: #datepicker Odd behavior in different browsers

Mar 08, 2018 06:21 AM|Eric Du|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

1StormChaser...

Member

11 Points

37 Posts

Re: #datepicker Odd behavior in different browsers

Mar 08, 2018 02:09 PM|1StormChaser43|LINK

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

Reply

mgebhard

All-Star

47661 Points

20882 Posts

Re: #datepicker Odd behavior in different browsers

Mar 08, 2018 09:07 PM|mgebhard|LINK

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.

#datepicker Odd behavior in different browsers [Answered]RSS

3 replies

Shortcuts

Related Links

#datepicker Odd behavior in different browsers

Re: #datepicker Odd behavior in different browsers

Re: #datepicker Odd behavior in different browsers

Re: #datepicker Odd behavior in different browsers