代码之家 › 专栏 › 技术社区 › mHelpMe

datepicker指定的值不符合所需的格式jquery.js

css html jquery javascript

mHelpMe · 技术社区 · 6 年前

所以昨天我问了一个关于日历日期的问题。我错过了一些参考资料,所以后来又加上了。请参阅下面的HTML部分。

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

Uncaught SyntaxError:意外的标记日期选取器。css:11

指定值“09/01/2018”不符合所需格式“yyyy-MM-dd”。 jquery.js:8254

不知道为什么这不起作用,也不知道“2018年1月9日”是从哪里来的?

我还认为在我的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选择我的文件夹scripts并列出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"/>

5 回复 | 直到 6 年前

barbsan Cibi 6 年前

jquery ui日期选择器 docs (至少向上滚动一行,其他注释上没有id,这是我可以链接到的最接近的元素)包含有关此问题的信息:

附加说明:
...

在 <input type="date"> 由于用户界面与本机选取器冲突,不支持。

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

<input type="date">

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

需要注意的是,显示的日期格式与 将根据用户浏览器的设置区域设置选择显示的日期格式 ,而 日期值的格式总是yyyy-mm-dd .

当您添加jquery ui日期选择器时,您将看到它们。
更糟糕的是它的默认值格式是 yyyy-mm-dd (详见 on mdn )因此,如果更改格式jquery ui datepicker将值设置为 dateFormat 属性(或基于区域设置)。它开始显示警告(在snippet的控制台中不可见,propably 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=“日期” 或设置为 "text" 然后获得jquery ui日期选择器的功能(参见下面的代码片段)。

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

Abderrahim Soubai-Elidrisi 6 年前

试试这个把戏

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

var qDate = '2018-08-01';

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

Akhil Singh 6 年前

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

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

Sagar More 6 年前

试试这个

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

VSM 6 年前

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