簡體   English   中英

Dojo DateTextBox不起作用

[英]Dojo DateTextBox doesn't work

我正在嘗試實施道場日期。 我正在嘗試從官方網站獲取示例 ,但是它不起作用。 我在這里想念什么嗎?

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

在你的代碼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]主題,因此我將the添加到主體中是class => <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> 

就這樣 。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM