Question

我想直接在我的dojo表单中嵌入dijit.form.Calendar，而不是像弹出一样显示dijit.form.DateTextBox;这是因为表单已经是一个下拉选择器而只是选择日期比必须再次点击文本框更自然了

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

Answer 1

首先查看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.
}

Answer 2

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

这已经被削减，并没有在这个化身进行测试。我发现处理正确传递的约束并将值反馈到输入并不是一项简单的任务。此外，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>

如何直接在表单中使用dijit.Calendar（而不是作为弹出窗口）

2 个答案: