2016-11-27 1 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

. 당신이 dojo css theme를 가져 와서 클래스 body의 추가 할 수있는 스타일,

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

다음 :

이 솔루션은 (true로 call parser.parse()) 그것을 설정하거나 아래와 같이 요구 섹션의 콜백 함수를 만드는 것입니다 태그 내가 [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> 
 
\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 당신을 환영합니다 :), 위로 엄지 :) –

관련 문제