大家好,我是 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 规范的属性 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,但在我看来更优雅。
关于javascript - dojo dijit.form.DateTextBox 约束不起作用,datetextbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8743757/