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>

Getting datepicker to work with Firefox [duplicate]

I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...
How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.
UPDATE: Firefox 57+ supports input type=date

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.
Here is a demo with CDN:
http://jsfiddle.net/trixta/BMEc9/
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" />
In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.
Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.

It is in Firefox since version 51 (January 26, 2017),
but it is not activated by default (yet)
To activate it:
about:config
dom.forms.datetime -> set to true
https://developer.mozilla.org/en-US/Firefox/Experimental_features

There's a simple way to get rid of this restriction by using the datePicker component provided by jQuery.
Include jQuery and jQuery UI libraries
(I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
Use the following snip
$(function() {
$( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'});
});
See jQuery UI DatePicker - Change Date Format if needed.

The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.
http://caniuse.com/#search=date
I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?

Here is a full example with the date formatted in YYYY-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
dFormat: '-',
dateSigns: '-',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />

While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:
pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'
Ultimately I agree with #SuperUberDuper in that Mozilla is way behind on including this natively.

This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).
Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
and your input as:
<input type="text" class="datepicker" name="your-name" />
Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site.
My 2 cents...

The latest version of firefox the firefox 57(Quantum) supports date and other features it was released on November 14, 2017. You can download it by clicking this link

Sometimes you do not want use Datepicker http://jqueryui.com/datepicker/ in your project because:
You do not want use jquery
Conflict of jquery versions in your project
Choice of the year is not convenient. For example you need 120 clicks on the prev button for moving to 10 years ago.
Please see my very simple cross browser code for date input. My code apply only if your browser is not supports the date type input
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr#mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
<h1>Date field</h1>
Date:
<input type='date' id='date' />
New date: <span id="NewDate"></span>
<script>
CreateDateFilter('date', {
formatMessage: 'Please type date %s'
, onblur: function (target) {
if (target.value == target.defaultValue)
return;
document.getElementById('NewDate').innerHTML = target.value;
}
, min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
, max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
, dateLimitMessage: 'Please type date between "%min" and "%max"'
}
);
</script>
</body>
</html>

You can use this datepicker functionality in anywhere just need to call on Master.aspx or Layout page
Include jQuery and jQuery UI libraries (I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
then add this script and this is working on all platforms.
<script>
jQuery(function ($) { // wait until the DOM is ready
$(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
});`
</script>
you can add this "editorDate" on multiple pages.
#Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new {
#class = "form-control editorDate"})

Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');

Here is the proper solution.
You should use jquery datepicker everywhere
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Below is the link to get the complete code
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.
Click here to copy the JQuery datepicker code

I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:
https://bootstrap-datepicker.readthedocs.io/en/latest/
Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.
Usage:
<input class="datepicker">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});

Mask input on MVC5

So, I'm trying to put some mask on my input, I have seen a lot of information arround this, however I couldn't find a way to work on my code. I tried with Jquery plugin masked input and Inputmask, any good results.
Here is my JS code with a function for each of those inputs:
(document).ready(function () {
$("#telephone").inputmask("mask", { "mask": "(99) 9999-99999" });
});
$(document).ready(function () {
$("#phone").mask("(999) 999-9999");
});
and the page where my input is:
<p>phone: <input type="text" id="phone" /></p>
<p>phone: <input type="text" id="telephone" /></p>
and on my _layout:
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/maskedinput")
#Scripts.Render("~/bundles/inputmask")
absoluty nothing happens on my front.
I'm a newbie at coding yet, and english is my second language, but I hope that this question is understandable.
Can you guys help me ?

If you don't mind using Third Party Library, you might want to look into Kendo UI Core which is Free and Open Source.
Usage is quite simple -
$(function() {
$("#telephone").kendoMaskedTextBox({
mask: "(999) 000-0000"
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<input id="telephone" value="555 123 4567" />
Here is the sample code at Kendo UI Dojo.

jQuery datepicker not working at all

I have a very annoying problem with jQuery and the datepicker from jQuery-UI.
Here is my javascript code:
<script type="text/javascript">
/*<![CDATA[*/
<!--
$(function(){
$("#startdate").datepicker({dateFormat: 'dd.mm.yyyy'});
});
// -->
/*]]>*/
</script>
And here the HTML part:
<input type="text" name="tx_cal_controller[startdate]" id="startdate" readonly="readonly">
The necessary JavaScript libraries are included in the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://foo.bar/fileadmin/res/jquery-ui-1.8.17.custom.min.js?1328657226" type="text/javascript"></script>
But there is no datepicker when I click on the input field. I would really appreciate it, if anyone could give me a hint.
Thanks in advance.

I solved it. There was a problem with the div of the datepicker. I had to include my own jQuery-UI package and modify it, so that when the input field gets clicked, the z-index of the datepicker gets higher (>1000) than the one of the other content divs and therefore visible.

Why is jqueryUI datepicker throwing an error?

I am trying out jqueryUI, but firebug catches the following error on this script:
$(function(){$("#date").datepicker()});
The firebug error reads:
$("#date").datepicker is not a function
On my html, the "date" id looks like this:
<input type="text" name="date" id="date" >
NB: I have used the correct JqueryUI css/js scripts on the section
Nothing is executing...

jQuery documentation says you can call the datepicker by this command:
$("#datepicker").datepicker();
If you click the 'view source' button on the documentation page you can see that they've wrapped it into the ready function:
$(document).ready(function(){
$("#datepicker").datepicker();
});
EDIT: It should work with INPUT (thanks for pointing this out Steerpike). This is the test I've written and it works, try it yourself:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker" value="this is a test">
</body>
</html>

You're almost certainly not loading the datepicker plugin properly. Please supply us the code you're using to include the javascript files.
If you keep having problems, load the jquery and the UI from the google api.
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>

for me it was just case of making sure the jquery ui was the last one in the list of all the js includes.

$(document).ready(function(){
// Your code here
});
make sure your function is inside the .ready main function.

It's an old post but I got here when looking for a solution so people still read it ;) I have or rather had the same problem. In my case it turned out that I was attaching js in html in wrong way (notice in what way I was ending script tag)
WRONG: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"/>
GOOD: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"></script>
When I was doing it in the wrong way I had the same error.

You are probably loading prototype.js or another library that uses $ as an alias.
Try to replace $ with jQuery.