javascript datepicker 指定的值不符合要求的格式 jquery.js

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

提问by mHelpMe

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.

所以昨天我问了一个关于设置日历日期的问题。我错过了一些参考资料，所以后来添加了它们。请参阅下面的 HTML 部分。

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

未捕获的语法错误：意外的令牌 datepicker.css:11

指定的值“09/01/2018”不符合要求的格式“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?

不知道为什么这不起作用以及日期“09/01/2018”来自哪里？

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

我也认为在我的 datepicker.css 中应该如下所示。

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

链接 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.

当我这样做时，Uncaught SyntaxError 消息消失了，但仍然存在另一个问题。

$(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 src=”时，智能感知会选择我的文件夹脚本并列出 3 个文件（下图，jQES 是我创建的文件）但它没有列出另外两个文件该文件夹，jquery-ui.js 或 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

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

回答by barbsan

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:

jquery-ui datepicker文档（至少滚动 1 行，附加说明上没有 id，这是我可以链接到的最接近的元素）包含有关此问题的信息：

Additional Notes:
...

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

补充说明：
...

<input type="date">由于与本机选择器的 UI 冲突，不支持在 上创建日期选择器。

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

这是具有属性的默认 HTML5 输入type="date"：

<input type="date">

From MDN about HTML5 date input's value:

从 MDN 关于 HTML5 日期输入的值：

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.

需要注意的一件事是，显示的日期格式与实际值不同——显示的日期格式将根据用户浏览器的设置区域设置进行选择，而日期值的格式始终为 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 dateFormatproperty (or based on locales). It starts showing warning (not visible in snippet's console, propably console.warn is only visible in developer tools)

当您添加 jquery-ui datepicker 时，您会看到它们。
更糟糕的是，它的默认值格式是yyyy-mm-dd（请参阅mdn 上的更多信息），因此如果您更改格式，jquery-ui datepicker 会将值设置为dateFormat属性中的格式（或基于语言环境）。它开始显示警告（在代码片段的控制台中不可见，可能 console.warn 仅在开发人员工具中可见）

$(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).

可能的修复：如果您删除属性type="date"或将其设置为，"text"那么您将获得 jquery-ui datepicker 的功能（请参阅下面的代码段）。

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

回答by Abderrahim Soubai Elidrissi

Try this trick

试试这个技巧

$("#datePicker").datepicker();

var qDate = '2018-08-01';

$('.datepicker').datepicker({ 
     dateFormat: 'dd-mm-yy'
     }).datepicker("setDate", new Date(qDate));

回答by Akhil Singh

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>

回答by Sagar More

Try this

试试这个

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

回答by VSM

Try below jsfiddle.

试试下面的jsfiddle。

http://jsfiddle.net/Sampath_Madhuranga/3ow88r6u/291/

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>