javascript dojo dijit.form.DateTextBox 约束不起作用，datetextbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8743757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dojo dijit.form.DateTextBox constraints not working, datetextbox
提问by Ted
Hi I'm new to javascript and 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. 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.htmlHowever, the constraints aren't working in my code. The only thing I'm really doing differently is using thetundratheme. Any suggestions would be greatly appreciated.
嗨，我是 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>采纳答案by Parzifal
With the new, HTML5-conform attribute data-dojo-typeintroduced in Dojo 1.6, the way how widget attributes are parsed has changed as well (to validate in HTML5 too). Widget-specific attributes are now in an HTML attribute called data-dojo-props, in a JSON-style syntax.
随着data-dojo-typeDojo 1.6 中引入的新的 HTML5-conform 属性，小部件属性的解析方式也发生了变化（也在 HTML5 中进行验证）。特定于小部件的属性现在位于名为 的 HTML 属性中data-dojo-props，采用 JSON 样式的语法。
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(and 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 dojoTypeinstead of data-dojo-type, then the onChangeattribute would be parsed. Note that it would not be HTML5-conform, but in my opinion more elegant.
或者您使用 olddojoType而不是data-dojo-type，则该onChange属性将被解析。请注意，它不会符合 HTML5，但在我看来更优雅。
回答by chenio
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.
我希望它能帮助你。
回答by JRoquez
Searching for an effective date range and restrictions, where only can have a range in the past, adding the constraintsmax with echoing the date in this format Y-m-d, I manage to edit it like this, hopes this help.
搜索有效的日期范围和限制，其中只能有过去的范围，添加最大限制并以这种格式回显日期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>回答by sitesbyjoe
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". Here I'm setting the endDatePicker to add constraints based on the new startDate someone selected so it's dynamic:
我有一个附加点为“startDatePicker”，另一个附加点为“endDatePicker”。在这里，我将 endDatePicker 设置为基于某人选择的新 startDate 添加约束，因此它是动态的：
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
