dojo dijit.form.DateTextBox約束不起作用，datetextbox

嗨，我是新來的JavaScript和道場。我試圖使用兩個dijit DateTextBoxes和下拉日曆來爲數據庫上的查詢建立日期範圍。一旦選擇了開始日期或結束日期，我想限制可用日期，以便不可能選擇在開始日期之前按時間順序排列的結束日期，反之亦然。我試圖從dojo參考中應用這個叫做'即時更改約束'的示例（大約在頁面的中間部分）：http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html但是，這些約束在我的代碼中不起作用。我真正做的唯一不同的是使用tundra主題。任何建議將不勝感激。dojo dijit.form.DateTextBox約束不起作用，datetextbox

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

來源

2012-01-05 Ted

我能想到的唯一的另一件事是，每一個文字框是它自己的執行環境中運行，所以他們不'看'對方。 – Ted 2012-01-05 14:10:28

感謝您的迴應Michael！我嘗試了你的建議，但沒有任何運氣。我不明白爲什麼沒有設定約束條件，即使當我像你建議的那樣對一個日期進行硬編碼時也是如此。另外，我的猜測是'arguments [0]'是每個DateTextBox對象的arguments屬性中的第一個值，如果用戶選擇一個日期，則會更新它;然後這將是一個有效的js日期。 – Ted 2012-01-05 14:43:22

隨着道場1.6引入了新的HTML5的符合屬性，窗口小部件屬性是如何解析的方式也發生了變化（在HTML5驗證過）。特定於窗口小部件的屬性現在位於名爲data-dojo-props的HTML屬性中，採用JSON樣式語法。

要再次讓你的榜樣工作，要麼把在data-dojo-props的onChange（和required）（注意，您必須環繞它的功能）：

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而不是，那麼onChange屬性將被解析。請注意，它不符合HTML5，但在我看來更優雅。

來源

2012-01-05 14:33:38 Parzifal

如果您使用第一種解決方案，則還可以向函數中添加一個參數：function（date）{...}，然後使用date而不是參數[0]。會更優雅。 – Parzifal 2012-01-05 14:38:19

我一天做一些這樣的：

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);">

我希望它幫你。

來源

2012-01-05 19:28:50 chenio

是的，但我正在尋找一種方法來創建一個有效的日期範圍與兩個dateTextBoxes – Ted 2012-07-25 22:43:30

搜索的有效日期範圍內和限制，在這裏只能有過去的範圍，在這種格式Y-m-d呼應日期添加約束最大，我設法編輯這樣的，希望這種幫助。

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(" 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>

來源

2012-07-18 15:55:20 JRoquez

你調用PHP函數。它看起來會起作用，但我只想使用javascript/dojo – Ted 2012-07-25 22:46:13

我從來沒有在這樣的模板中的屬性的任何運氣。

我最終只是處理它在我跑的時候要麼改變功能：

我有一個與「startDatePicker」的連接點，另一個「endDatePicker」。在這裏我設置基於選擇的新的startDate某人endDatePicker加限制所以它是動態的：

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

來源

2017-06-19 20:10:17 sitesbyjoe

dojo dijit.form.DateTextBox約束不起作用，datetextbox

回答

相關問題