Dojo DateTextBox не работает

Я пытаюсь реализовать дату додзё. Я пытаюсь использовать пример с официального сайта, но он не работает. Я что-то упустил здесь?

<!DOCTYPE html>
<html>
<head>
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script src="resources/js/dojo-release-1.10.0/dojo/dojo.js"></script>
    <script>
        require(["dojo/parser", "dijit/form/DateTextBox"]);
    </script>
</head>
<body>
<div>
    <label for="fromDate">From:</label>
    <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
           onChange="myToDate.constraints.min = arguments[0];"/>
    <label for="toDate">To:</label>
    <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
           onChange="myFromDate.constraints.max = arguments[0];"/>
</div>
</body>
</html>

javascript html dojo dijit.form
person Eniss    schedule 27.11.2016    source источник
comment
Ничего общего с вашей ошибкой, но атрибут for элемента label должен ссылаться на идентификатор, а не на имя.   -  person RobG    schedule 27.11.2016
comment
На самом деле я не использую эти элементы метки.   -  person Eniss    schedule 27.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

В вашем коде в dojoconfig вы указываете, что parseOnload равно false , поэтому HTML не будет анализироваться как компонент dijit.

Решение состоит в том, чтобы установить для него значение true ( call parser.parse()) или создать функцию обратного вызова в разделе require, как показано ниже:

require(["dojo/parser", "dijit/form/DateTextBox"],function(parser,data){
    parser.parse();
});

затем для стиля вам необходимо импортировать тему dojo css и добавьте в класс тег body, в приведенном ниже коде я использую тему [claro][2], поэтому я добавил в тело его класс => <body class="claro">

Пример 1: вы можете протестировать приведенный выше полный пример, используя parseOnload:true:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script  src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
      require(["dojo/parser", "dijit/form/DateTextBox"]);
    </script>
  </head>
  <body class="claro">
    <div>
      <label for="fromDate">From:</label>
      <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
             onChange="myToDate.constraints.min = arguments[0];"/>
      <label for="toDate">To:</label>
      <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
             onChange="myFromDate.constraints.max = arguments[0];"/>
    </div>
  </body>
</html>

Пример 2: установив parseOnload:false и используя функцию обратного вызова + parser.parse():

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script  src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require(["dojo/parser", "dijit/form/DateTextBox"],function(parser,data){
        	parser.parse();
        });
    </script>
</head>
<body class="claro">
	<div>
	    <label for="fromDate">From:</label>
	    <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true"
	           onChange="myToDate.constraints.min = arguments[0];"/>
	    <label for="toDate">To:</label>
	    <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true"
	           onChange="myFromDate.constraints.max = arguments[0];"/>
	</div>
</body>
</html>

Это все .

person Spring    schedule 27.11.2016
comment
Наконец-то я понял, как правильно пользоваться додзё. Спасибо за ваш потрясающий ответ! - person Eniss; 28.11.2016