admin管理员组

文章数量:1415673

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: .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=".6/dojo/resources/dojo.css">
  <link rel="stylesheet" href=".6.0/dijit/themes/tundra/tundra.css" media="screen" />
  <script src=".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>

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/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./ajax/libs/dojo/1.6/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
  <script src="http://ajax.googleapis./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>

  • javascript
  • dojo
  • dijit.form
Share Improve this question edited Apr 15, 2015 at 18:03 Ruslan López 4,4772 gold badges30 silver badges40 bronze badges asked Jan 5, 2012 at 14:00 TedTed 1,6908 gold badges31 silver badges52 bronze badges 2
  • The only other thing I can think of is that each DateTextBox is operating within its own execution context, so they don't 'see' each other. – Ted Commented Jan 5, 2012 at 14:10
  • Thanks for your response Michael! I tried your suggestion, but without any luck. And I don't understand why the constraint isn't being set, even when I hard-code a date like you suggested. Also, my guess is that 'arguments[0]' is the first value in the arguments property of each DateTextBox object, which is updated if the user selects a date; which then would be a valid js date. – Ted Commented Jan 5, 2012 at 14:43
Add a ment  | 

4 Answers 4

Reset to default 1

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./ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis./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.

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 Y-m-d, I manage to edit it like this, hopes this help. 

dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis./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>

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./ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis./ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis./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.

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:

this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();

本文标签： javascriptdojo dijitformDateTextBox constraints not workingdatetextboxStack Overflow

版权声明：本文标题：javascript - dojo dijit.form.DateTextBox constraints not working, datetextbox - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745211350a2647904.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。