[英]dojo dijit.form.DateTextBox constraints not working, datetextbox
嗨，我是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-conform屬性data-dojo-type ，解析小部件屬性的方式也發生了變化（也可以在HTML5中進行驗證）。 窗口小部件特定的屬性現在位於JSON樣式的HTML屬性中，該屬性稱為data-dojo-props 。
為了使您的示例再次正常工作，請將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標准，但在我看來更為優雅。
搜索有效的日期范圍和限制（過去只能有一個范圍），並以Ymd格式回顯日期以添加最大限制 ，我設法以此進行編輯，希望對此有所幫助。
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(" Ymd "); ?>'} " /> <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(" Ymd "); ?>'} " /> <button onclick="dijit.byId('fromDate').reset(); dijit.byId('toDate').reset();" type="reset">reset</button> <button type="">Generate</button> </form>
我從來沒有碰到過這樣的模板中的屬性。
我最終只是在任何一個更改時在運行的函數上處理它：
我有一個帶有“ startDatePicker”的連接點，另一個帶有“ endDatePicker”的連接點。 在這里，我設置endDatePicker來基於選定的某人的新startDate添加約束，因此它是動態的：
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();
我有一天會做一些像：
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);">
希望對您有所幫助。
Dojo dojoType "dijit.form.DateTextBox"：它可以顯示“今天”按鈕嗎？
[英]Dojo dojoType "dijit.form.DateTextBox": can it display a "Today" button?
使用dijit.form.DateTextBox無法保留正確的時間值
[英]Using dijit.form.DateTextBox Not able to retain proper Time value
dojo 1.9自定義小部件中的錯誤擴展dijit / form / DateTextBox
[英]Error in dojo 1.9 custom widget extending dijit/form/DateTextBox
dojo dijit / form / DateTextBox是否可以有多個datePattern
[英]Is it possible to have more than one datePattern for dojo dijit/form/DateTextBox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.