如何直接在表單中使用dijit.Calendar（而不是彈出式）

我想直接在我的dojo表單中嵌入dijit.form.Calendar，而不是顯示爲彈出式窗口（如dijit.form.DateTextBox提供;這是因爲窗體已經是一個下拉選擇器，只是選擇一個日期將比再次點擊文本框更自然）如何直接在表單中使用dijit.Calendar（而不是彈出式）

最簡單的方法是什麼？我不介意文本框是否仍然顯示並且是可編輯的（儘管這不是要求） - 但dijit.Calendar文檔明確指出，您不能將其用作表單元素，因爲它不提供輸入。

來源

2011-02-07 David Fraser

我實際上做的是創建一個新的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>

來源

2011-02-25 14:20:16

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

來源

2011-02-10 22:49:40 Bitwize

如何直接在表單中使用dijit.Calendar（而不是彈出式）

回答

相關問題