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

Question

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

我相信我的代码对于如何设置日历日期是正确的。然而，在加载页面时我得到了这些错误，

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

不确定为什么这不起作用以及日期“09/01/2018”的来源？

我还认为我的 datepicker.css 应该如下所示。

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

当我这样做时，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" />

更新

以下是我页面中的所有引用资料。一件事(可能没什么)但是当我输入“script src=”时，intelli sense 会选择我的文件夹脚本并列出 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" />

更新 2

这是加载时的样子。

如果我点击蓝色箭头指向下方日历的区域，则会显示。

如果我点击黑色的大箭头，我会得到两个日历

我有另一个完全相同的日历框。无论我做什么，它只显示下面显示的日历。唯一的区别是，在加载时，我不会像在上面的日历中那样尝试设置日期。

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

Answer 1

jquery-ui 日期选择器 docs (至少向上滚动 1 行，附加说明上没有 id，这是我可以链接到的最接近的元素)包含有关此问题的信息:

Additional Notes:
...

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

这是带有属性 type="date" 的默认 HTML5 输入:

<input type="date">

来自 MDN 关于 HTML5 日期输入的 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.

当你添加 jquery-ui datepicker 时，你会看到它们。
更糟的是它的默认值格式是yyyy-mm-dd (查看更多 on 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" />

可能的修复:如果你删除属性 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" />