[英]dojo dijit.form.DateTextBox constraints not working, datetextbox
嗨，我是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>
通过在Dojo 1.6中引入新的HTML5-conform属性data-dojo-type ，解析小部件属性的方式也发生了变化（也可以在HTML5中进行验证）。 窗口小部件特定的属性现在位于JSON样式的HTML属性中，该属性称为data-dojo-props 。
为了使您的示例再次正常工作，请将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标准，但在我看来更为优雅。
搜索有效的日期范围和限制（过去只能有一个范围），并以Ymd格式回显日期以添加最大限制 ，我设法以此进行编辑，希望对此有所帮助。
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(" Ymd "); ?>'} " /> <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(" Ymd "); ?>'} " /> <button onclick="dijit.byId('fromDate').reset(); dijit.byId('toDate').reset();" type="reset">reset</button> <button type="">Generate</button> </form>
我从来没有碰到过这样的模板中的属性。
我最终只是在任何一个更改时在运行的函数上处理它：
我有一个带有“ startDatePicker”的连接点，另一个带有“ endDatePicker”的连接点。 在这里，我设置endDatePicker来基于选定的某人的新startDate添加约束，因此它是动态的：
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
我有一天会做一些像：
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);">
希望对您有所帮助。
Dojo dojoType "dijit.form.DateTextBox"：它可以显示“今天”按钮吗？
[英]Dojo dojoType "dijit.form.DateTextBox": can it display a "Today" button?
使用dijit.form.DateTextBox无法保留正确的时间值
[英]Using dijit.form.DateTextBox Not able to retain proper Time value
dojo 1.9自定义小部件中的错误扩展dijit / form / DateTextBox
[英]Error in dojo 1.9 custom widget extending dijit/form/DateTextBox
dojo dijit / form / DateTextBox是否可以有多个datePattern
[英]Is it possible to have more than one datePattern for dojo dijit/form/DateTextBox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.