dojo dijit.form.DateTextBox约束不起作用，datetextbox [英] dojo dijit.form.DateTextBox constraints not working, datetextbox

查看：129
本文介绍了dojo dijit.form.DateTextBox约束不起作用，datetextbox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好我是javascript和dojo的新手。我试图使用两个dijit DateTextBox与下拉日历来建立数据库上查询的日期范围。一旦选择开始或结束日期，我想限制可用的日期，以便不可能在开始日期之前按时间顺序选择结束日期，反之亦然。我正在尝试从dojo引用中应用所谓的即时更改约束（在页面上大约一半）的示例： http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html 但是，限制在我的代码中不起作用。我真正做的不同的是使用 tundra 主题。任何建议将不胜感激。 



 < html>< head> <标题>< /标题> < meta http-equiv =Content-Typecontent =text / html; charset = UTF-8> < link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css> < link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.cssmedia =screen/> < script src =http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.jsdata-dojo-config =isDebug：true，parseOnLoad：true> ;< /脚本> < script type =text / javascript> dojo.require（ dijit.form.DateTextBox）; < / script>< / head>< body class =tundra> < DIV> < label for =fromDate> From：< / label> < input id =fromDatetype =textname =fromDatedata-dojo-type =dijit.form.DateTextBoxrequired =trueonChange =dijit.byId（'toDate'）。 min = arguments [0]; /> < label for =toDate> To：< / label> < input id =toDatetype =textname =toDatedata-dojo-type =dijit.form.DateTextBoxrequired =trueonChange =dijit.byId（'fromDate'）。 max = arguments [0]; /> < / div>< / body>< / html>

data-dojo-type ，如何解析小部件属性的方式也改变了（在HTML5中验证）。 Widget特定的属性现在是一个名为 data-dojo-props 的HTML属性，采用JSON风格的语法。



要使您的示例再次工作，请将 onChange （和需要）放在 data-dojo-props （请注意，你必须绕它一个函数）：



  dojo.require dijit.form.DateTextBox）;  

 < link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css>< link rel =stylesheethref =http：/ /ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.cssmedia =screen/>< script src =http://ajax.googleapis.com /ajax/libs/dojo/1.6.0/dojo/dojo.xd.jsdata-dojo-config =isDebug：true，parseOnLoad：true>< / script>< body cl屁股= 苔原 > < label for =fromDate> From：< / label> < input id =fromDatetype =textname =fromDatedata-dojo-type =dijit.form.DateTextBoxdata-dojo-props =onChange：function（）{dijit.byId（'toDate '）.constraints.min = arguments [0];}，required：true/> < label for =toDate> To：< / label> < input id =toDatetype =textname =toDatedata-dojo-type =dijit.form.DateTextBoxdata-dojo-props =onChange：function（）{dijit.byId（'fromDate '）.constraints.min = arguments [0];}，required：true/>



或者您使用旧的 dojoType 而不是 data-dojo-type ，然后 onChange 属性将被解析。请注意，它不会符合HTML5，但在我看来更为优雅。


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.html However, the constraints aren't working in my code. The only thing I'm really doing differently is using thetundra theme. 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>

解决方案

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). Widget-specific attributes are now in an HTML attribute called data-dojo-props, in a JSON-style syntax.

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):

 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. Note that it would not be HTML5-conform, but in my opinion more elegant.

这篇关于dojo dijit.form.DateTextBox约束不起作用，datetextbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆