dijit.Calendarを（ポップアップではなく）フォーム内で直接使用する方法

Question

は、ポップアップとして表示されるのではなく、直接dojoフォームに埋め込まれます（dijit.form.DateTextBoxが提供します。フォームは既にドロップダウンセレクタであり、日付を選択するだけで、テキストボックスで再度クリックする必要がなくなります）

これを行う最も簡単な方法は何ですか？テキストボックスがまだ表示され、編集可能である（私はそれは必須条件ではありませんが）かどうかは気にしませんが、dijit.Calendar文書では入力を提供しないためフォーム要素として使用できないことを明示しています。

Answer 1

私が実際に行ったことは、値を隠しテキストフィールドに格納する新しいdijitウィジェットを作成することでした。 full implementationは時間も表示するカスタムカレンダーウィジェットの使用を含むので、基本的な考え方はjavascriptとテンプレートに従います。

これは削減されており、このインカネーションではテストされていません。私は、制約が正しく処理され、入力にフィードバックされる値が簡単な作業ではないことを発見しました。またwidgetsInTemplateは、これが適切にカレンダーウィジェットをロードするために取得することが重要だった：

<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> 

：

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

その後、テンプレートはおおよそ次のようになります

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