Dojo DateTextBox 不起作用答案

【问题标题】：Dojo DateTextBox doesn't workDojo DateTextBox 不起作用
【发布时间】：2016-11-27 01:47:34
【问题描述】：

我正在尝试实现 dojo 日期。我正在尝试来自官方网站的example，但它不起作用。我在这里遗漏了什么吗？

<!DOCTYPE html>
<html>
<head>
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script src="resources/js/dojo-release-1.10.0/dojo/dojo.js"></script>
    <script>
        require(["dojo/parser", "dijit/form/DateTextBox"]);
    </script>
</head>
<body>
<div>
    <label for="fromDate">From:</label>
    <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
           onChange="myToDate.constraints.min = arguments[0];"/>
    <label for="toDate">To:</label>
    <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
           onChange="myFromDate.constraints.max = arguments[0];"/>
</div>
</body>
</html>

【问题讨论】：

与您的错误无关，但 label 元素的 for 属性应该引用 ID，而不是名称。
我其实不用那些标签元素。

标签： javascript html dojo dijit.form

【解决方案1】：

在 dojoconfig 的代码中，您将 parseOnload 指定为 false ，因此 HTML 不会被解析为 dijit 组件。

解决方案是将其设置为 true（call parser.parse()) 或在 require 部分中创建回调函数，如下所示：

require(["dojo/parser", "dijit/form/DateTextBox"],function(parser,data){
    parser.parse();
});

然后，对于样式，您必须导入 dojo css theme 并添加它的类 body 标签，在下面的代码中我使用的是 [claro][2] 主题，所以我将它添加到正文中它的类 @ 987654329@<body class="claro">

示例 1：您可以使用 parseOnload:true 测试上述完整示例：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script  src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
      require(["dojo/parser", "dijit/form/DateTextBox"]);
    </script>
  </head>
  <body class="claro">
    <div>
      <label for="fromDate">From:</label>
      <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
             onChange="myToDate.constraints.min = arguments[0];"/>
      <label for="toDate">To:</label>
      <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
             onChange="myFromDate.constraints.max = arguments[0];"/>
    </div>
  </body>
</html>

示例2：通过设置parseOnload:false并使用回调函数+parser.parse()：

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script  src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require(["dojo/parser", "dijit/form/DateTextBox"],function(parser,data){
        	parser.parse();
        });
    </script>
</head>
<body class="claro">
	<div>
	    <label for="fromDate">From:</label>
	    <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
	           onChange="myToDate.constraints.min = arguments[0];"/>
	    <label for="toDate">To:</label>
	    <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
	           onChange="myFromDate.constraints.max = arguments[0];"/>
	</div>
</body>
</html>

就是这样。

【讨论】：

我终于明白如何正确使用dojo了。感谢您的精彩回答！