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?
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:
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.
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.
Member
11 Points
37 Posts
#datepicker Odd behavior in different browsers
Mar 07, 2018 02:45 PM|1StormChaser43|LINK
<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?
Contributor
6730 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:
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
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.
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="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>
All-Star
53041 Points
23628 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.