2012-01-05 2 views
2

Привет Я новичок в javascript и dojo. Я пытаюсь использовать два 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>

+0

Единственная вещь, которую я могу думать о том, что каждый DateTextBox работает в своем собственном контексте выполнения, поэтому они надевают 't' видеть 'друг друга. – Ted

+0

Спасибо за ваш отзыв Майкл! Я попробовал ваше предложение, но без везения.И я не понимаю, почему ограничение не устанавливается, даже когда я жестко программирую дату, как вы предложили. Кроме того, я предполагаю, что «arguments [0]» - это первое значение в свойстве arguments каждого объекта DateTextBox, которое обновляется, если пользователь выбирает дату; который тогда будет действительной датой js. – Ted

ответ

1

С новым, HTML5-атрибут соответствовать введенный в додзё 1.6, так как обрабатываются виджет атрибуты изменился, а также (для проверки в HTML5 тоже). Специфичные для виджетов атрибуты теперь находятся в атрибуте HTML, который называется data-dojo-props, в синтаксисе стиля JSON.

Для того, чтобы ваш пример работы снова, либо поставить onChangerequired) в 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 вместо , тогда будет проанализирован атрибут onChange. Обратите внимание, что это не будет соответствовать HTML5, но, на мой взгляд, более изящным.

+0

Если вы используете первое решение, вы также можете добавить параметр к функции: function (date) {...}, а затем использовать дату вместо аргументов [0]. Было бы более элегантно. – Parzifal

0

я когда-нибудь сделать некоторые, как:

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

Я надеюсь, что это поможет вам.

+0

да, но я искал способ создать допустимый диапазон дат с двумя dateTextBoxes – Ted

0

Поиск эффективного диапазона дат и ограничений, где только может иметь диапазон в прошлом, добавляя ограничения макс с вторя дату в этом формате 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>

+1

, вы вызываете php-функции. Похоже, что это сработает, но я только хочу использовать javascript/dojo – Ted

0

Я никогда не везло с атрибутами в шаблоне, как это.

я в конечном итоге просто его обработки на функцию я бегу, когда либо изменения:

У меня есть один с точки прикрепления «startDatePicker», а другой с «endDatePicker». Здесь я устанавливаю endDatePicker для добавления ограничений на основе новой STARTDATE кого-то выбирают таким образом, что это динамическая:

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