2

嗨，我是 javascript 和 dojo 的新手。我正在尝试使用两个带有下拉日历的 dijit DateTextBoxes 来建立数据库查询的日期范围。一旦选择了开始日期或结束日期，我想限制可用日期，这样就不可能选择按时间顺序在开始日期之前的结束日期，反之亦然。我正在尝试从此处的 dojo 参考中应用名为“动态更改约束”的示例（大约在页面的一半处）：http: //dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html 但是，约束在我的代码中不起作用。我唯一真正不同的是使用tundra主题。任何建议将不胜感激。 

<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

  <script type="text/javascript">
    dojo.require("dijit.form.DateTextBox");
  </script>
</head>

<body class="tundra">
  <div>
    <label for="fromDate">From:</label>
    <input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('toDate').constraints.min = arguments[0];" />
    <label for="toDate">To:</label>
    <input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('fromDate').constraints.max = arguments[0];" />

  </div>
</body>

</html>

4

4 回答 4

1

随着data-dojo-typeDojo 1.6 中引入的新的、符合 HTML5 的属性，小部件属性的解析方式也发生了变化（也可以在 HTML5 中进行验证）。特定于小部件的属性现在位于名为 的 HTML 属性data-dojo-props中，采用 JSON 样式的语法。

要使您的示例再次工作，请将onChange(and required) 放入data-dojo-props（请注意，您必须在其周围包装一个函数）：

 dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>


<body class="tundra">
  <label for="fromDate">From:</label>
  <input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true" />
  <label for="toDate">To:</label>
  <input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true" />

或者您使用旧的dojoType而不是data-dojo-type，则该onChange属性将被解析。请注意，它不符合 HTML5，但在我看来更优雅。

于 2012-01-05T14:33:38.767 回答
0

我有一天会做一些类似的事情：

dojo.require("dijit.form.DateTextBox");

some_function(minDate) {
  dijit.byId('toDate').constraints.min = minDate;

}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

<body class="tundra">
  <input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: some_function(this.value);">

我希望它对你有帮助。

于 2012-01-05T19:28:50.673 回答
0

搜索一个有效的日期范围和限制，其中只能有一个过去的范围，添加限制max 并以这种格式回显日期Y-m-d，我设法像这样编辑它，希望有所帮助。

dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
  <form>
    <label for="fromDate">From:</label>
    <input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} "
    />
    <label for="toDate">To:</label>
    <input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} " />
    <button onclick="dijit.byId('fromDate').reset(); dijit.byId('toDate').reset();" type="reset">reset</button>
    <button type="">Generate</button>
  </form>

于 2012-07-18T15:55:20.850 回答
0

我从来没有像这样对模板中的属性有任何运气。

我最终只是在更改时运行的函数上处理它：

我有一个带有“startDatePicker”的附加点，另一个带有“endDatePicker”。在这里，我设置 endDatePicker 以根据某人选择的新 startDate 添加约束，因此它是动态的：

this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
于 2017-06-19T20:10:17.637 回答