datepicker specified value does not conform to the required format jquery.js

Issue

So yesterday I asked a question about setting the date for a calendar. I was missing some references so have since added them. Please see the HTML section below.

I believe my code to be correct for how to set the date for a calendar. However upon loading the page I get these errors,

Uncaught SyntaxError: Unexpected token datepicker.css:11

The specified value "09/01/2018" does not conform to the required format, "yyyy-MM-dd". jquery.js:8254

Not sure why this is not working and where the date "09/01/2018" is coming from at all?

I also think in my the datepicker.css should be like below.

link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" type="text/css" />

When I do this the Uncaught SyntaxError message disappears but still have the other issue.

$(document).ready(function() {
  $("#dtSelectorStatic").datepicker();
  $("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />

<input id="dtSelectorStatic" />

Update

Below are all the references I have in my page. One thing (might be nothing) but when I type "script src=" the intelli sense picks on my folder scripts and list 3 files (image below, jQES is the file I created) but it does not list the other two files also in that folder, jquery-ui.js or jquery-ui.min.js

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>
<script src="/scripts/external/jquery/jquery.js"></script>
<script src="/scripts/jquery-ui.min.js"></script>
<script src="/scripts/jQES.js"></script> 
<link href="CSS/MyCSSFile.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

update 2

This is how it looks on load up.

If I click in the area where the blue arrow is pointing to the calendar below is shown.

If I click on the big black arrow I get both calendars

I have another calendar box which is exactly the same. Which only shows the calendar shown below no matter what I do. The only difference is that on load up I do not try to set the date as I do in the calendar above.

   <input id="someId" type="date"/>

Solution

jquery-ui datepicker docs (scroll at least 1 line up, there's no id on Additional Notes, that was the closest element I could link to) contains information about this issue:

Additional Notes:
...

Creating a datepicker on an <input type="date"> is not supported due to a UI conflict with the native picker.

This is default HTML5 input with attribute type="date":

<input type="date">

From MDN about HTML5 date input's value:

One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.

When you add jquery-ui datepicker, you see both of them.
What's worse its default value format is yyyy-mm-dd (see more on mdn) so if you change format jquery-ui datepicker sets value formatted as in dateFormat property (or based on locales). It starts showing warning (not visible in snippet's console, propably console.warn is only visible in developer tools)

$(document).ready(function() {
  $("#dtSelectorStatic").datepicker({dateFormat: "dd-M-yy"});

  $("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />


<input type="date" id="dtSelectorStatic" />

Possible fix: if you remove attribute type="date" or set it to "text" then you get functionality of jquery-ui datepicker (see snippet below).

$(document).ready(function() {
  $("#dtSelectorStatic").datepicker({dateFormat: "yy-mm-dd"});

  $("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />


<input id="dtSelectorStatic" />

Answered By - barbsan