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

Question

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

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

Answer 1

То, что я на самом деле сделал, чтобы создать новый 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> 

Answer 2

Первый Проверьте 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. 
}