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

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

0 голосов
/ 07 февраля 2011

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

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

Ответы [ 2 ]

5 голосов
/ 11 февраля 2011

Первая проверка 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.
}
0 голосов
/ 25 февраля 2011

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