Question

我正在尝试将当前日期设置为dijit.Calendar但由于某种原因它没有设置，我也没有收到任何错误。我也试图获取选择的值来填充字段或会话范围变量，但这也不会发生 - 只需得到dom.byId()为空错误。

<div data-dojo-type="dijit/Calendar" id="myCal">
<script type="dojo/method" data-dojo-event="onLoad" data-dojo-args="value">
                require(["dojo/dom", "dojo/date/locale"],
                function(dom, locale){
                dom.byId('myCal').set('value',new Date());});

</script>
<script type="dojo/method" data-dojo-event="onChange"
                    data-dojo-args="value">
                    require(["dojo/dom", "dojo/date/locale"],
                    function(dom, locale){
                    dom.byId('formatted').innerHTML =
                    locale.format(value, {formatLength: 'medium',
                    selector:'date'}); });
</script>
</div>

谁能看到我做错了什么？

Answer 1

我还在Notes 8.5.3 dojo 1.6中的一个应用程序中使用了Calendar小部件。所以它可能无法在你的xpage中工作，但你可以尝试一下。这就是我的成果：

首先不要忘记设置dojoForm="true", dojoParseOnLoad="true", dojoTheme="true". 然后导入小部件所需的资源（我使用了自定义的calendar.css）：

<xp:this.resources>
    <xp:dojoModule name="dojox.widget.Calendar"></xp:dojoModule>
    <xp:styleSheet href="/calendar.css"></xp:styleSheet>
</xp:this.resources>

然后困难的部分我使用JavaScriptBlock构建窗口小部件，其中我还设置开始日期（value: new Date）并隐藏其中绑定到sessionScope变量的xp:inputText。当用户点击日历的日期时，我提交此inputBox。

<xp:panel id="calendarHolder" style="width:200px">
        <xp:scriptBlock id="Calendar">
            <xp:this.value><![CDATA[XSP.addOnLoad(function(){
        dojo.require("dojox.widget.Calendar");
        dojo.require("dojo.date","dijit.registry"); 
        dojo.ready(function(){      
            // create the Calendar:
            var selectedDate = null;

            var calendar_body = new dojox.widget.Calendar({
                    value: new Date(),
                    isDisabledDate:dojo.date.locale.isWeekend,
                    onValueSelected: function(date){calendarDateClicked(date);
                    }
                }, "calendar_body");


            //create Click action
            function calendarDateClicked(date){
                var d = new Date(date);
                var month = '' + (d.getMonth() + 1);
                var day = '' + d.getDate();
                var year = d.getFullYear();

                if (month.length < 2) month = '0' + month;
                if (day.length < 2) day = '0' + day;

                var dateString = [year,month,day].join("");         
                dojo.byId('#{id:hiddenCalWidgetSelectedDate}').value = dateString;
                XSP.partialRefreshPost("#{id:computedField1}",{});//Post Value to server
            }
        });
    });]]></xp:this.value>
        </xp:scriptBlock>

    <div id="calendar_body">
        <xp:inputText
            id="hiddenCalWidgetSelectedDate"
            style="display:none;"
            value="#{sessionScope.selectedDate}">
            <xp:this.defaultValue><![CDATA[#{javascript://
var d = new Date(/*Today*/);
var month = '' + (d.getMonth() + 1);
var day = '' + d.getDate();
var year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year,month,day].join("");  }]]></xp:this.defaultValue>
            </xp:inputText>
        </div>
        </xp:panel>

在日期窗口小部件中显示所选日期：

    <xp:text escape="true" id="computedField1" 
value="#{javascript: return 'Hallo' + sessionScope.selectedDate;}">
        </xp:text>

在我的应用程序中，小部件有点大，因为我使用了一个menue让用户在一个日期选择了不同的动作，所以我从我的大代码中提取了这个代码并在空的Xpage上测试它。希望它有帮助=）

dijit.Calendar默认值

1 个答案: