dijit/form/DateTextBox 未正确解析答案

【问题标题】：dijit/form/DateTextBox not correctly parseddijit/form/DateTextBox 未正确解析
【发布时间】：2015-06-01 13:26:32
【问题描述】：

dijit/form/DateTextBox 解析不正确的原因是什么？

这里是场景：

我有一个正确呈现以下控件的页面：

然后用户可以被重定向到另一个页面，我们将他选择的日期存储在当前页面上。当他导航回页面时，他应该再次找到之前输入的日期。日期的值是正确的，但似乎没有正确解析 Dojo 控件，因为我得到以下信息：

在哪种情况下我们会错误地解析日期？

重要提示：我只在 Chrome 上收到此错误，这在 IE 和 FireFox 上运行良好。

非常感谢！

编辑：以下允许重现问题：

<!DOCTYPE html>
<HTML>
<HEAD>

    <TITLE>Dojo - RS - Date Picker demonstration</TITLE>

    <LINK rel="stylesheet" href="../dojoExtension/dojo/resources/dojo.css"                                                  

    <SCRIPT type="text/javascript">
        dojoConfig = {
                baseUrl: "../dojoExtension/dojo",
                parseOnLoad: false,
                async:true,
                locale: "fr-ch"
        };
    </SCRIPT>

    <SCRIPT type="text/javascript" src="../dojoExtension/dojo/dojo.js">    </SCRIPT>

    <SCRIPT type="text/javascript">
        function loading() {
            require(["dojo/parser", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser){
                parser.parse();
            });
        }

        function replaceDate() {

            require(["dojo/dom-construct", "dojo/_base/window", "dojo/parser" , "dijit/form/DateTextBox", "dojo/domReady!"], function(domConstruct,win,parser){
                var row = "<INPUT type=text data-dojo-type=dijit/form/DateTextBox name=datePickerDemo id=idDatePickerDemo >";
                try {
                    var newRow = domConstruct.place(domConstruct.toDom(row), win.body() );
                    }
                catch(err) {
                    alert(err);
                }
            });
        }

    </SCRIPT>

</HEAD>
<BODY onload="loading();"
      class="tundra">

    <DIV id="myDiv" style="position:fixed; top:150px; left:150px">

        <script type="text/javascript">
            require(["dijit/form/DateTextBox"]);
        </script>

        <INPUT type="text"
               data-dojo-type="dijit/form/DateTextBox" 
               name="datePickerDemo"
               id="idDatePickerDemo" />

        <a href="javascript:replaceDate()">replace the date</a>

    </DIV>


</BODY>
</HTML>

【问题讨论】：

你能告诉我们将值设置到控件中的代码吗？你能验证你的输入是Date吗？
谢谢加布里埃尔。我没有设置值的任何特定代码，控件设置为默认值，即当天的日期。此外，当我们第一次到达页面和导航返回页面时，控件完全相同。是否必须首先销毁控件？我不相信它正在与 IE 和 Firefox 一起使用......
您可以尝试在require() 调用中添加dijit/form/DateTextBox 模块在loading() 中。即require(["dojo/parser","dijit/form/DateTextBox", "dojo/domReady!"]
@frank：感谢您的建议。我刚试过，但不幸的是它没有帮助。
@Julien 为什么要重新构建日期时间框？您如何将存储日期的值传递到上一页？你在使用本地存储吗？您可以使用您选择的值来设置现有的日期时间框。例如 datatimeWidget.set(value, new Date()); 其中 datatimeWidget 是对 dojo dijit/form/DateTextBox 小部件的引用。

标签： javascript date dojo

【解决方案1】：

您使用dijit/registry 获取不正确的domNode。

dijit/registry 将搜索与 domNode 对象不同的 dojo 小部件。

dojo/dom 模块应该用于通过 id 搜索 domNodes。
即

require(["dojo/dom"], 
    function(dom){ 
      dom.byId('domId') 
    }
);

请查看here，了解 registry.byId 和 dom.byId 之间的详细说明

在您的实例中，replaceDate() 将更改为

 function replaceDate() {

        require(["dojo/dom", "dojo/dom-construct", "dojo/_base/window", "dojo/parser", 
                 "dijit/registry", "dijit/form/DateTextBox", "dojo/domReady!"], 
            function(dom, domConstruct,win,parser,registry){
                var row = '<INPUT type="text" data-dojo-type="dijit/form/DateTextBox" name="datePickerDemo" id="idDatePickerDemo2" >';
                var domObject = domConstruct.toDom(row);
                try {
                    var newRow = domConstruct.place(domObject, win.body() );
                    // Use dom.byId instead of registry.byId
                    parser.parse(dom.byId("idDatePickerDemo2"));
                    }
                catch(err) {
                    alert(err);
                }
        });
 }

【讨论】：

【解决方案2】：

好的，似乎真的来自“解析器”问题，以下是有效的：

    <!DOCTYPE html>
<HTML>
    <HEAD>

        <TITLE>Dojo - RS - Date Picker demonstration</TITLE>

        <LINK rel="stylesheet" href="../dojoExtension/dojo/resources/dojo.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/dijit.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/tundra.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/form/Button.css" />
        <LINK rel="stylesheet" href="../dojoExtension/dijit/themes/tundra/form/Common.css" />

        <SCRIPT type="text/javascript">
            dojoConfig = {
                    baseUrl: "../dojoExtension/dojo",
                    parseOnLoad: false,
                    async:true,
                    locale: "fr-ch"
            };
        </SCRIPT>

        <SCRIPT type="text/javascript" src="../dojoExtension/dojo/dojo.js"></SCRIPT>

        <SCRIPT type="text/javascript">
            function loading() {
                require(["dojo/parser", "dijit/form/DateTextBox", "dojo/domReady!"], function(parser){
                    parser.parse();
                });
            }

            function replaceDate() {

                require(["dojo/dom-construct", "dojo/_base/window", "dojo/parser", "dijit/registry", "dijit/form/DateTextBox", "dojo/domReady!"], function(domConstruct,win,parser,registry){
                    var row = '<INPUT type="text" data-dojo-type="dijit/form/DateTextBox" name="datePickerDemo" id="idDatePickerDemo2" >';
                    var domObject = domConstruct.toDom(row);
                    try {
                        var newRow = domConstruct.place(domObject, win.body() );
                        parser.parse(registry.byId("idDatePickerDemo2"));
                        }
                    catch(err) {
                        alert(err);
                    }
                });
            }

        </SCRIPT>

    </HEAD>
    <BODY onload="loading();"
          class="tundra">

        <DIV id="myDiv" style="position:fixed; top:150px; left:150px">

            <script type="text/javascript">
                require(["dijit/form/DateTextBox"]);
            </script>

            <INPUT type="text"
                   data-dojo-type="dijit/form/DateTextBox" 
                   name="datePickerDemo"
                   id="idDatePickerDemo" />

            <a href="javascript:replaceDate()">replace the date</a>

        </DIV>


    </BODY>
</HTML>

好吧，看来我的问题更多来自“解析器”的理解:) ...但我们可以认为这个特定问题已解决。

感谢回答的人，这绝对有很大帮助！

【讨论】：