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

Question

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

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

Uncaught SyntaxError: Unexpected token datepicker.css:11

指定的值“09/01/2018”不符合要求的格式，“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=”时，智能感知会选择我的文件夹脚本并列出 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 或特殊的日期库来修复它。简单的 JS 就可以了。问题是浏览器需要格式 yyyy-mm-dd。

并且 toLocaleString 不允许日期采用这种格式。所以经过搜索我发现这是ISO格式，我们可以使用 Date().toISOString() 来获取所需格式的日期。

我使用 slice 方法提取日期部分只是因为 Date().toISOString() 返回日期和时间。

我的代码：date: new Date().toISOString().slice(0, 10)

Answer 2

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

补充说明：
...

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

这是默认的 HTML5 输入，属性为 type="date":

<input type="date">

来自 MDN 关于 HTML5 日期输入的value：

需要注意的是，显示的日期格式与实际值不同——显示的日期格式将根据用户浏览器设置的区域设置，而日期值格式始终为 yyyy-mm-dd。

当您添加 jquery-ui datepicker 时，您会看到它们。
更糟糕的是，它的默认值格式是yyyy-mm-dd（查看更多on mdn），所以如果您更改格式，jquery-ui datepicker 设置值格式为dateFormat 属性（或基于语言环境）。它开始显示警告（在 sn-p 的控制台中不可见，可能 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 的功能（参见下面的 sn-p）。

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

Answer 3

试试下面的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>

Answer 4

试试这个

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

Answer 5

如果需要任何帮助，请尝试此操作，请发表评论。

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

Answer 6

试试这个技巧

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

var qDate = '2018-08-01';

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