Question

嗨，我是javascript和dojo的新手。我正在尝试使用带有下拉日历的两个dijit DateTextBox来为数据库上的查询建立日期范围。我想在选择开始日期或结束日期后限制可用日期，这样就无法在开始日期之前选择按时间顺序排列的结束日期，反之亦然。我正在尝试从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>

Answer 1

使用Dojo 1.6中引入的新的HTML5兼容属性data-dojo-type，解析窗口小部件属性的方式也发生了变化（也在HTML5中进行验证）。特定于窗口小部件的属性现在位于名为data-dojo-props的HTML属性中，采用JSON样式语法。

要让您的示例再次运行，请将onChange（和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，但在我看来更优雅。

Answer 2

我总有一天会这样做：

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);">

我希望它对你有所帮助。

Answer 3

搜索有效的日期范围和限制，其中只能包含过去的范围，添加约束最大值并回显此格式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>

Answer 4

我从未对模板中的属性感到幸运。

我最后只是在我改变运行的函数上处理它：

我有一个附加点为“startDatePicker”，另一个带有“endDatePicker”。在这里，我设置endDatePicker，根据所选择的新startDate添加约束，使其动态化：

this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();

dojo dijit.form.DateTextBox约束不起作用，datetextbox

4 个答案: