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

问题描述

我想要直接嵌入我的 dojo形式，而不是显示为弹出窗口（如提供;这是因为窗体已经是一个下拉式选择器，只是选择一个日期会比在文本框上再次单击更自然）。

I'd like to have a dijit.form.Calendar embedded directly in my dojo form, rather than appearing as a popup (as dijit.form.DateTextBox provides; this is because the form is already a dropdown selector and just choosing a date would be much more natural than having to click again on the text box)

最简单的方法去做这个？我不介意如果文本框仍然出现并且是可编辑的（尽管这不是必需的） - 但是 dijit.Calendar docs明确表示您不能使用它作为一个表单元素，因为它不提供输入。

What's the easiest way to do this? I don't mind if the text box still appears and is editable (although that's not a requirement) - but the dijit.Calendar docs say explicitly that you can't use it as a form element because it doesn't provide an input.

推荐答案

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

What I actually did was to create a new dijit widget that stores the value in a hidden text field. The basic idea follows in javascript and template, although the full implementation is more complex as it also includes using a custom calendar widget that also displays the time.

在这个化身中被削减并没有测试。我发现处理正确传递的约束，并且反馈给输入的值不是一件简单的任务。另外 widgetsInTemplate 对于正确加载日历小部件至关重要：

This has been cut down and not tested in this incarnation. I found that handling the constraints being passed through correctly and the value being fed back to the input was not a trivial task. Also widgetsInTemplate was critical to get this to load the calendar widget properly:

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);
    }
});

然后模板看起来大致如下：

Then the template looks roughly like this:

<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（而不是弹出窗口）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！