Dojo DateTextBox 不起作用
Dojo DateTextBox doesn't work
我正在尝试实施 dojo 日期。我正在从官方网站尝试 example,但它不起作用。我在这里遗漏了什么吗?
<!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 theme 并添加它的 class body
标签,在下面的代码中我使用 [claro][2]
主题所以我将它添加到正文中 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>
就这些了。
我正在尝试实施 dojo 日期。我正在从官方网站尝试 example,但它不起作用。我在这里遗漏了什么吗?
<!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 theme 并添加它的 class body
标签,在下面的代码中我使用 [claro][2]
主题所以我将它添加到正文中 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>
就这些了。