dojo dijit.form.DateTextBox约束不起作用，datetextbox
[英]dojo dijit.form.DateTextBox constraints not working, datetextbox
问题描述
Hi I'm new to javascript and dojo. 
嗨，我是javascript和dojo的新手。 I'm trying to use two dijit DateTextBoxes with the drop-down calendars to establish a date range for a query on a database. 我正在尝试使用两个带有下拉日历的dijit DateTextBoxes来建立数据库查询的日期范围。 I want to restrict the dates available, once the begin or end date has been selected, so that its impossible to pick an end date that is chronologically before the begin date, and vice versa. 一旦选择了开始日期或结束日期，我想限制可用的日期，这样就不可能选择按时间顺序在开始日期之前的结束日期，反之亦然。 I'm trying to apply the example called 'changing constraints on the fly' (about half way down the page) from the dojo reference here: http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html However, the constraints aren't working in my code. 我正在尝试从以下dojo参考中应用名为“动态更改约束”（大约位于页面的一半）的示例： http : //dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html但是，约束在我的代码中不起作用。 The only thing I'm really doing differently is using the tundra theme. 我真正做的唯一不同的是使用tundra主题。 Any suggestions would be greatly appreciated. 任何建议将不胜感激。
<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 个解决方案
解决方案1
1 已采纳 2012-01-05 14:33:38
With the new, HTML5-conform attribute data-dojo-type introduced in Dojo 1.6, the way how widget attributes are parsed has changed as well (to validate in HTML5 too). 通过在Dojo 1.6中引入新的HTML5-conform属性data-dojo-type ，解析小部件属性的方式也发生了变化（也可以在HTML5中进行验证）。 Widget-specific attributes are now in an HTML attribute called data-dojo-props , in a JSON-style syntax. 窗口小部件特定的属性现在位于JSON样式的HTML属性中，该属性称为data-dojo-props 。
To make your example work again, either put the onChange (and required ) in data-dojo-props (note that you have to wrap a function around it): 为了使您的示例再次正常工作，请将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" />
Or you use the old dojoType instead of data-dojo-type , then the onChange attribute would be parsed. 或者，您使用旧的dojoType而不是data-dojo-type ，则将解析onChange属性。 Note that it would not be HTML5-conform, but in my opinion more elegant. 请注意，它不会符合HTML5标准，但在我看来更为优雅。
解决方案2
0 2012-07-18 15:55:20
Searching for an effective date range and restrictions, where only can have a range in the past, adding the constraints max with echoing the date in this format Ymd , I manage to edit it like this, hopes this help. 搜索有效的日期范围和限制（过去只能有一个范围），并以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>
解决方案3
0 2017-06-19 20:10:17
I never had any luck with the attributes in the template like that. 我从来没有碰到过这样的模板中的属性。
I ended up just handling it on the function I run when either change: 我最终只是在任何一个更改时在运行的函数上处理它：
I have one with an attach point of "startDatePicker" and another with "endDatePicker". 我有一个带有“ startDatePicker”的连接点，另一个带有“ endDatePicker”的连接点。 Here I'm setting the endDatePicker to add constraints based on the new startDate someone selected so it's dynamic: 在这里，我设置endDatePicker来基于选定的某人的新startDate添加约束，因此它是动态的：
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
解决方案4
0 2012-01-05 19:28:50
I someday do some like: 我有一天会做一些像：
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);">
I hope that it help you. 希望对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.