2016-11-27 12 views
1

私はdojo日付を実装しようとしています。私は公式サイトからexampleを試していますが、動作しません。私はここに何かを逃していますかdojoconfigあなたがparseOnloadそのfalseに指定されているので、HTMLがdijitコンポーネントとして解析されることはありませんで、あなたのコードで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> 
+0

エラーとは何も関係ありませんが、* label *要素の* for *属性は名前ではなくIDを参照する必要があります。 – RobG

+0

私は実際にそれらのラベル要素を使用しません。 – Eniss

答えて

2

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

そして、あなたはdojo css themeをインポートし、それのクラスbodyを追加する必要があり、スタイルのために:

溶液(trueに設定call parser.parse())か、以下のように必要セクションでコールバック関数を作成することですあなたがparseOnload:trueを使用して上記の完全な例をテストすることができます:

私は、私はそれがクラス => <body class="claro">

例1の体に追加しました[claro][2]テーマを使用しています以下のコード内のタグ、

<!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> 
 
\t <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){ 
 
     \t parser.parse(); 
 
     }); 
 
    </script> 
 
</head> 
 
<body class="claro"> 
 
\t <div> 
 
\t  <label for="fromDate">From:</label> 
 
\t  <input data-dojo-id="myFromDate" type="text" name="fromDate" data-dojo-type="dijit/form/DateTextBox" required="true" 
 
\t   onChange="myToDate.constraints.min = arguments[0];"/> 
 
\t  <label for="toDate">To:</label> 
 
\t  <input data-dojo-id="myToDate" type="text" name="toDate" data-dojo-type="dijit/form/DateTextBox" required="true" 
 
\t   onChange="myFromDate.constraints.max = arguments[0];"/> 
 
\t </div> 
 
</body> 
 
</html>

すべてです。

+0

私はついにdojoを正しく使う方法を理解しました。あなたのすばらしい答えをありがとう! – Eniss

+0

@Enissあなたは大歓迎です:)、親コメント –

関連する問題