AUI date picker doesn't look the same in different browsers

Jira Development Jira Server
1

Hey there,

I’m implementing a Jira plugin. On it’s UI there is a date picker which should adapt the look of Jira. The problem is:
For some browsers (eg. internet explorer) the date picker looks correct (Jira style), but for others (Chrome & Firefox) the default date picker style is displayed.

Internet explorer
ie

Chorme
chrome

.vm

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:aui-date-picker")
<html>
<head>
...
<meta name="decorator" content="atl.admin">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

AJS.$(document).ready(function() {
	    	AJS.$('#release-picker-rv').datePicker({ 'overrideBrowserDefault': true });
	    });
 </script>
</head>
<body>
...
 <div class="field-group">
  <label for="releasePicker">Release version*:</label>
  <input class="aui-date-picker" name="releasePicker" id="release-picker-rv" type="date" autocomplete="off"/>
 </div>
 ...
</body>

atlassian-plugin.xml

...
    <resource type="download" name="date-picker" location="com.atlassian.auiplugin:aui-date-picker"/>  
    <resource type="download" name="jquery.min.js" location="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
...

Strange right?

2

It’s definitely supposed to look like the first one in Chrome too. You should check your console to see if there are any errors being thrown in Chrome.

Edit: Also, jQuery is already included on Server. You shouldn’t need to put an extra tag in your document (that might even be causing your problem) and you should also remove it from your atlassian-plugin.xml. I’m pretty sure absolute URLs don’t work there anyway.

3

I got it!

It was because I was calling:

AJS.$(document).ready(function() {
AJS.$(‘#release-picker-rv’).datePicker({ ‘overrideBrowserDefault’: true });
});

once in the HTML head and once in an JS File. Turns out that the execution at the same time caused the wrong presentation of the date-picker(s). So now I only call the ready-function once in the head of each .vm.

Thanks anyway Sven :slight_smile: