dojo dijit.form.DateTextBox约束不起作用，日期文本框

8e2ybdfx 于 2022-12-16 发布在 Dojo

关注(0)|答案(4)|浏览(184)

你好，我是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>

dojo

来源：https://stackoverflow.com/questions/8743757/dojo-dijit-form-datetextbox-constraints-not-working-datetextbox

4条答案

按热度按时间

f3temu5u1#

Dojo 1.6中引入了新的、符合HTML5的属性data-dojo-type，小部件属性的解析方式也发生了变化（也要在HTML5中验证）。小部件特定的属性现在位于一个名为data-dojo-props的HTML属性中，采用JSON风格的语法。
为了让你的例子再次运行，要么把onChange（和required）放在data-dojo-props中（注意你必须用一个函数把它 Package 起来）：

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

赞(0）回复(0）举报 2022-12-16

5uzkadbs2#

搜索一个有效的日期范围和限制，其中只能有一个范围在过去，添加约束最大值与回显的日期在这种格式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>

赞(0）回复(0）举报 2022-12-16

vc9ivgsu3#

有一天我会做一些像这样的事情：

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

希望对你有帮助。

赞(0）回复(0）举报 2022-12-16

yi0zb3m44#

我从来没有任何运气与属性在模板中像这样。
最后，我只是在发生以下任一变化时运行的函数上处理它：
我有一个连接点为“startDatePicker”的，另一个连接点为“endDatePicker”的，这里我设置endDatePicker根据用户选择的新startDate添加约束，使其成为动态的：

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

赞(0）回复(0）举报 2022-12-16

我来回答

dojo dijit.form.DateTextBox约束不起作用，日期文本框

4条答案

相关问题

热门标签

最新问答