本部長は管理ができない

Salesforceに関わっているエンジニアの技術メモ。ときどきそれ以外。

apex:inputTextでカレンダーと日付リンクを表示

Salesforce Visualforce

f:id:gren_dken:20140523114919j:plain
ステーキくにのランチハンバーグ。美味い。



日付型、日付/時間型の入力の際に表示されるカレンダーとリンクは、Visualforceページだとapex:inputFieldの場合に表示される。

f:id:gren_dken:20140708211526p:plain


apex:inputTextでコントローラのDate型変数をvalueに設定してもカレンダーとリンクは表示されない。
日付型のinputFieldのHTMLを確認すると、カレンダーはDatePicker#pickDate、リンクはDatePicker#insertDateを使用している。

  • ページ
<apex:inputText id="fooDate" value="{!fooDate}" size="12"
    onfocus="javascript:DatePicker.pickDate(true, '{!$Component.fooDate}', false)" />
[ 
<apex:outputLink value="javascript:DatePicker.insertDate('{!fooDate}', '{!$Component.fooDate}', true);">
    {!fooDate}
</apex:outputLink>
 ]
<p style="display: none;"><apex:inputField value="{!obj.Date__c}"/></p>


  • コントローラ
// 今日日付をセット
this.fooDate = Datetime.now().format('yyyy/MM/dd', 'JST');


ただしカレンダーのHTMLは、ページ内に日付型か日付/時間型の入力フィールドがないとページにロードされないため、下記のように非表示でinputFieldを置く必要がある。

<p style="display: none;"><apex:inputField value="{!obj.Date__c}"/></p>