Aui-datepicker-field AUI vs REALITY - how is that?

You go the aui date-picker https://docs.atlassian.com/aui/7.9.3/docs/date-picker.html
Open code in jsfiddle
See how great looking this date-picker design
Copy code to your notepad:

<html>
    <head>
        <!-- External dependencies -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
        <script src="//unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui.js"></script>
        <script src="//unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui-experimental.js"></script>
        <script src="//unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui-datepicker.js"></script>
        <link rel="stylesheet" type="text/css" href="//unpkg.com/@atlassian/aui@7.9.3/dist/aui/css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="//unpkg.com/@atlassian/aui@7.9.3/dist/aui/css/aui-experimental.css"/>
        <!-- / External dependencies -->
        <script>
            AJS.$(document).ready(function() {
                AJS.$('#demo-range-2').datePicker({'overrideBrowserDefault': true});
            });
        </script>
    </head>
    <body>
        <input class="aui-date-picker" id="demo-range-2" type="date" max="2012-01-25" min="2011-12-25" />
    </body>
</html>

Now you open this file using Chrome

And it works against what you’ve just seen in jsfiddle

Now you open this file using Safari

And it don’t work at all

JIRA 7.9.0 / JIRA 7.11.0

Hi @m.pavlov,

I need a little more info to understand whether you’re encountering a bug in AUI’s date picker component or a compatibility problem with the code in Jira.

  • Which version of Safari were you using?
  • Are there any console errors or other problems reported by your browser’s developer tools?
  • How did you add the code to Jira 7.9 and 7.11? Are you creating an atlassian plugin, or copying the HTML snippet above in to the page?

Chrome 67.0.3396.99
Safari 11.0.3

None

Copy code to blank page (text document)

If you’re saving that HTML snippet to a local file, like test.html, then opening that html file directly in a browser, the example code won’t work. The AUI docs examples are using a “protocol-relative” URL pattern – note that they start with // instead of https://. That’s because they expect to be loaded from a web server, not a local file-system. On a local filesystem, the protocol will be file:///, and since you don’t have the files locally, they don’t resolve.

This pattern is an anti-pattern these days, according to Paul Irish (https://www.paulirish.com/2010/the-protocol-relative-url/). As such, I’ll consider this a bug with AUI’s documentation examples. I’ve raised https://ecosystem.atlassian.net/browse/AUI-4877 to fix the documentation.

In the meantime, in your local html file, change the URLs to the AUI assets to use https:// instead of //, like so:

<html>
    <head>
        <!-- External dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
        <script src="https://unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui.js"></script>
        <script src="https://unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui-experimental.js"></script>
        <script src="https://unpkg.com/@atlassian/aui@7.9.3/dist/aui/js/aui-datepicker.js"></script>
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@7.9.3/dist/aui/css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@7.9.3/dist/aui/css/aui-experimental.css"/>
        <!-- / External dependencies -->
        <script>
            AJS.$(document).ready(function() {
                AJS.$('#demo-range-2').datePicker({'overrideBrowserDefault': true});
            });
        </script>
    </head>
    <body>
        <input class="aui-date-picker" id="demo-range-2" type="date" max="2012-01-25" min="2011-12-25" />
    </body>
</html>
3 Likes

Well i’ve been facing the same issue with this plugin:


Same issue with date picker fields
Now i know how to fix it, thank you!

1 Like