We Keep Coding

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

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

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

You don't need any jquery or special date library for fixing it. Simple JS will do just fine. The problem is that the browser requires the format yyyy-mm-dd.
And toLocaleString doesn't allow the date to be in this format. So after searching I found out that this is ISO format and we can use Date().toISOString() to get the date in the required format.
I used the slice method to extract the date part only because Date().toISOString() returns date with time.
My code: date: new Date().toISOString().slice(0, 10)

Try this trick
$("#datePicker").datepicker();
var qDate = '2018-08-01';
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", new Date(qDate));

Try this if need any help please comment.
$(document).ready(function () {
$(".datepicker").datepicker();
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<input type="text" class="datepicker" /><br/>
<style>
.ui-datepicker {font-size:60%; }
</style>

Try this
$(document).ready(function() {
$(".datepicker").datepicker({
dateFormat: "yy/mm/dd"
});
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
});

Try below jsfiddle.
http://jsfiddle.net/Sampath_Madhuranga/3ow88r6u/291/
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<form method="post">
<p><input type="date" placeholder="" /></p>
</form>

jQuery UI Datepicker - disable every second week

I am using jQuery datepicker and I need a functionality that disables every second week.
For example: All days of even weeks (2,4,6..) is enabled and can be picked - But all days of odd weeks (1,3,5..) are disabled and can not be picked.
I know I can disable specific days/or dates with beforeshowday. But this is not what I'm after..
Any solutions? Thanks.

You can use datepicker's beforeShowDay function to disable. Below code uses moment to make getting week easier but you can try something else as well:
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay:function(d){
var m=moment(d);
//week number is even
var en=m.week()%2===0;
//its first and monday
en|=(m.date()===1 && m.isoWeekday()===1);
return [en,"","Odd Week"];
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
Updated to enable 1st Monday in odd weeks. Check with 1-June-2015

HTML5 Date Picker - Remove Date Arrows

I am using Angular. I am curious to how I can remove these arrows:
Also, if its possible to click the date picker box(Where mm/dd/yyyy is) and allow it to show the Date Selector instead of clicking the far right arrow.

I don't think it does this across all browsers; narrow down where you see this and where you don't want to see this; and then do something like the below but specific to the browser your targeting.
input::-webkit-calendar-picker-indicator{
display: none;
}

You can do this with jquery here is a demo (I couldn't get it to work in the snippet)
JsFiddle
$(document).ready(function() {
$("#datepicker").datepicker();
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<body>
<form>
<input id="datepicker" />Choose a date
</form>
</body>
You can resize the datepicker by doing something like
div.ui-datepicker{
font-size:10px;
}

Auto populating new field with date from another field for datepicker

I have a field that has a datepicker, but what I want that field, called New Date, to have populate with the date in the div id="olddate" plus one day. The problem I'm seeing is that the date in the olddate div is a text string, so I need to convert that into a date object, put it in the New Date field and add a day. I also prefer to keep it in jQuery, if possible. I've seen plenty of answers to questions very similar to this, but nothing seems to work. Thanks in advance!! Fiddle: http://jsfiddle.net/Carlos1815/U9Avn/
Here's what I got thus far:
<html lang="en">
<head>
<link href="css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script>
$(function() {
var olddate = $("#olddate").text();
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "setDate", olddate);
});
</script>
</head>
<body>
<div id="olddate">3/30/2013</div>
<div>New Date: <input type="text" id="datepicker"></div>
</body>
</html>

Its worth to use moment.js at this moment to solve this date time problems.
Working Demo
$(function () {
var day = moment($("#olddate").text(), "MM/DD/YYYY");
day.add('days', 1)
var newDate=day.toDate();
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", newDate);
});

Selecting multiple targets with datepicker

I have recently found a jquery datepicker for my website. I have installed the relevent files but am having a prioblem as I have two date fields on my page that the datepicker should target. Currently it only works on the first of the two fields, even when both the fields have the same id and name ("date"). The javascript that the datepicker uses is below
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"date",
dateFormat:"%Y-%m-%d",
isStripped:false,
cellColorScheme:"armygreen",
/*selectedDate:{ This is an example of what the full configuration offers.
day:5, For full documentation about these settings please see the full version of the code.
month:9,
year:2006
},*/
yearsRange:[1978,2020],
limitToToday:false,
//cellColorScheme:"beige",
imgPath:"img/",
weekStartDay:1
});
};
I don't know how to add another target to the target line in this code Ideally id like it to target "dateA" and "dateB".
Any ideas? sorry if im being daft!
John

Make sure you are using JQueryUI's datepicker since it is the most reliable.
If you are unfamiliar with JQueryUI, visit http://jqueryui.com/demos/ (this showcases what it is capable of).
To see a live demo of datepicker, go to http://jqueryui.com/demos/datepicker/. MAKE SURE TO LOOK AT OPTIONS/EVENTS/METHODS!.
As for the code...
Put these scripts in your <head>, which will give you scripts for JQuery & JQueryUI:
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({
altField: "#result1, #result2",
altFormat: "mm/dd/yy"
//altFormat: "DD, d MM, yy" //another format
});
});
</script>
</head>
For the body, I used the following:
<p>
Date:
<input type="text" id="datepicker">
<input type="text" id="result1">
<input type="text" id="result2">
</p>​
To visually see what I did, I made a quick demo. Feel free to use it!
http://jsfiddle.net/6UnTh/23/
To customize your theme, visit http://jqueryui.com/themeroller/ and download the necessary files (otherwise use the one I provided in the <head>).
Hope this helps! Make sure to use the other options/methods JQueryUI has to offer! HAPPY CODING!
Links:
JQuery (http://docs.jquery.com/Main_Page)
JQuery UI (http://jqueryui.com/demos/)
EDIT: (I HAVE UPDATED THE DEMO!):
http://jsfiddle.net/6UnTh/27/

<link rel="stylesheet" type="text/css" media="all" href="../css/jsDatePick_ltr.min.css" />
<script type="text/javascript" src="../js/jsDatePick.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField1",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField3",
dateFormat:"%d-%M-%Y"
});
};
</script>
<input type="text" size="12" id="inputField1" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField2" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField3" name="txt_ordate" class="ErrorField">