0

我希望将dijit.form.Calendar直接嵌入到我的 dojo 表单中，而不是作为弹出窗口出现（如dijit.form.DateTextBox提供的那样；这是因为表单已经是一个下拉选择器，只需选择一个日期即可比必须再次单击文本框更自然）

最简单的方法是什么？我不介意文本框是否仍然出现并且可编辑（尽管这不是必需的） - 但dijit.Calendar文档明确表示您不能将其用作表单元素，因为它不提供输入。

4

2 回答 2

5

首先查看http://docs.dojocampus.org/dijit/Calendar

您是正确的，日历的这种实现不会产生表单输入。这就是我的做法。本质上，当用户点击某个日期时，我们会通过保存稍后使用的值来响应点击。

//This function is called from via a "dojo.addOnLoad"
//It creates the calendar and defines an event for "onValueSelected"
function initCalendar() {
    dojo.declare("BigCalendar", dijit.Calendar, {
        onValueSelected: function(date){calendarDateClicked(date);}
    });

    bigCalendar = dojo.byId("calendarEvents");
    bigCalendar.setAttribute("dojoType", "BigCalendar");
    dojo.parser.parse(bigCalendar.parentNode);
}



function calendarDateClicked(date) {
// Here you can either take the date and put in into a text box (maybe hidden?) or save it off into an internal variable that you can later use in an ajax call or however you see fit.
}
于 2011-02-10T22:49:40.177 回答
0

我实际上所做的是创建一个新的 dijit 小部件，将值存储在隐藏的文本字段中。基本思想遵循 javascript 和模板，尽管完整的实现更复杂，因为它还包括使用自定义日历小部件，该小部件还显示时间。

这已被削减，并没有在这个化身中进行测试。我发现处理正确传递的约束以及反馈给输入的值并不是一项简单的任务。widgetsInTemplate让它正确加载日历小部件也很关键：

dojo.provide("custom.DateSelector");
dojo.require("dijit.form.DateTextBox");
dojo.declare("custom.DateSelector", dijit.form._DateTimeTextBox, {
    baseClass: "dijitTextBox dijitDateTextBox",
    _selector: "",
    type: "hidden",
    calendarClass: "dijit.Calendar",
    widgetsInTemplate: true,
    i18nModule: "custom",
    i18nBundle: "DateSelector",
    templateString: dojo.cache("custom", "template/DateSelector.html")
    _singleNodeTemplate: '<input class=dijit dijitReset dijitLeft dijitInputField" dojoAttachPoint="textbox,focusNode" autocomplete="off" type="${type}" ${!nameAttrSetting} />',
    value: new Date(),
    postCreate: function() {
        this.calendar.parentTextBox = this.textbox;
        this.inherited(arguments);
    }
});

那么模板大概是这样的：

<div class="dijit dijitReset dijitInline dijitLeft" waiRole="presentation">
    <div class="dijitReset dijitInputField dijitInputContainer">
                <input class="dijitReset dijitInputInner" dojoAttachPoint='textbox,focusNode' autocomplete="off" ${!nameAttrSetting} type='${type}' constraints="{datePattern: '${constraints.datePattern}', timePattern: '${constraints.timePattern}'}"/>
                <div dojoType='${calendarClass}' dojoAttachPoint='calendar' id="${id}_calendar" constraints="{datePattern: '${constraints.datePattern}', timePattern: '${constraints.timePattern}'}" value='${value}'/>
        </div>
</div>
于 2011-02-25T14:20:16.080 回答