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

发布于 2024-10-16 00:29:46 字数 379 浏览 4 评论 0原文

我希望将 dijit.form.Calendar 直接嵌入到我的 dojo 表单中，而不是显示为弹出窗口（如 dijit.form.DateTextBox 提供的；这是因为表单已经是一个下拉选择器，只选择一个日期比再次单击文本框要自然得多）

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没有你 2024-10-23 00:29:46

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

First Check out http://docs.dojocampus.org/dijit/Calendar

You are correct that this implementation of the calendar does not produce a form input. Here's how I have done it. Essentially when the user clicks a date we respond to the click by saving off the value to be used later.

//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.
}

回复收藏 0 原文

一萌ing 2024-10-23 00:29:46

我实际上所做的是创建一个新的 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>

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.

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>

回复收藏 0 原文

~没有更多了~