javascript - dojo dijit.form.DateTextBox 约束不起作用,datetextbox

标签 javascript dojo dijit.form

大家好,我是 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/

相关文章:

javascript - JS页面滚动不起作用

javascript - 如何允许编辑属性,例如在 PrestaShop 结帐时的颜色、尺码?

javascript - 道场移动文本框

javascript - 如何显示FileReader加载进度或加载图标?

javascript - 如何将 onClick 监听器注册到 GridX 中的 dijit 按钮?

javascript - 正在加载 CSS 和图像静态文件,但没有加载 js

javascript - 如何从 JavaScript 对象呈现 HTML 中的嵌套列表?

javascript - 检查 js 文件中的角色以启用或禁用菜单项

javascript - Javascript 中的动态日期计算

javascript - Dojo DateTextBox 不起作用