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

dojo dijit.form.DateTextBox constraints not working, datetextbox

本文关键字：DateTextBox 不起作用 约束 dojo form dijit      更新时间：2023-09-26

嗨，我是javascript和dojo的新手。我正在尝试使用两个带有下拉日历的dijitDateTextBoxes来为数据库上的查询建立日期范围。一旦选择了开始日期或结束日期，我想限制可用的日期，这样就不可能选择按时间顺序早于开始日期的结束日期，反之亦然。我试图在这里应用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>

Dojo1.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，但在我看来更优雅。

搜索一个有效的日期范围和限制，其中只能有一个过去的范围，添加限制最大值并以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>

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

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

我希望它能帮助你。

我从来没有遇到过这样的模板中的属性。

当任何一个变化时，我都只是在运行的函数上处理它：

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

this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
相关文章：