Как использовать dijit.Calendar непосредственно в форме (а не во всплывающем окне)

Я хочу, чтобы dijit.form.Calendar был встроен непосредственно в мою форму додзё, а не в виде всплывающего окна (как предлагает dijit.form.DateTextBox; это потому что форма уже является выпадающим селектором, и просто выбрать дату было бы гораздо более естественным, чем снова щелкнуть текстовое поле)

Какой самый простой способ сделать это? Я не возражаю, если текстовое поле по-прежнему отображается и редактируется (хотя это не является обязательным требованием), но в документах dijit.Calendar прямо говорится, что вы не можете использовать его в качестве элемента формы, потому что оно не обеспечивает ввод.


popup dojo dijit.form
person David Fraser    schedule 07.02.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Сначала ознакомьтесь с 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.
}
person Bitwize    schedule 10.02.2011

arrow_upward
0
arrow_downward

Что я на самом деле сделал, так это создал новый виджет 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>
person David Fraser    schedule 25.02.2011