【Salesforce】apex:inputTextでDatePickerを使う

【Salesforce】apex:inputTextでDatePickerを使う

Visualforceで日付項目を扱う際に、「input:Field」を使用することでDatepickerが使用可能になりますね。

このDatepickerは大変便利なのですが、「input:Field」を使用する関係上、SObjectの項目でしか使用することが出来ません。

しかし、少し工夫をすることで「apex:inputText」でもDatepickerを使用することが出来るようになります。

「apex:inputText」のonfocusにDatepickerを表示するjavascriptを組み込むのです。

例を記述します。

<apex:page id="Page" standardController="Contact" >

  <apex:form id="Form">
  
    <!-- inputField -->
    <div>
      <apex:inputField id="BirthDate1" styleClass="" value="{!Contact.Birthdate}" />
    </div>
  
    <!-- inputText1 -->
    <div>
      <apex:inputText id="BirthDate2" styleClass="" Value="{!Contact.Birthdate}" onfocus="DatePicker.pickDate(true, '{!$Component.Page.Form.Birthdate2}', false);" />
    </div>

    <!-- inputText2 -->
    <div class="dateInput dateOnlyInput" >
      <apex:inputText id="BirthDate3" styleClass="" Value="{!Contact.Birthdate}" onfocus="DatePicker.pickDate(true, '{!$Component.Page.Form.Birthdate3}', false);" />
    </div>
  
  </apex:form>

</apex:page>

取引先責任者の誕生日で例を示しました。

id=”BirthDate2″とid=”BirthDate3″のinputTextでonfocusを設定しています。

これによって、フォーカスを当てた時にDatepickerが表示されるようになります。

注意が必要なのが、ページ内にinputFieldで作成した日付項目が最低1つは必要ということです。

この場合で言うと、id=”BirthDate1″のタグが無くなるとjavascriptを設定してもDatepickerが表示されなくなります。

inputFieldの日付項目が存在しない場合、javascriptが読み込まれないのかもしれませんね。

id=”BirthDate3″の親であるdivで指定するクラスを使用すると、入力部分の幅が調整されるようです。

ページ内に存在すれば非表示にしても大丈夫なようです。

<apex:page id="Page" standardController="Contact" >

  <apex:form id="Form">
  
    <div style="display: none;">
      <apex:inputField id="BirthDate1" styleClass="" value="{!Contact.Birthdate}" />
    </div>
  
    <div>
      <apex:inputText id="BirthDate2" styleClass="" Value="{!Contact.Birthdate}" onfocus="DatePicker.pickDate(true, '{!$Component.Page.Form.Birthdate2}', false);" />
    </div>

    <div class="dateInput dateOnlyInput" >
      <apex:inputText id="BirthDate3" styleClass="" Value="{!Contact.Birthdate}" onfocus="DatePicker.pickDate(true, '{!$Component.Page.Form.Birthdate3}', false);" />
    </div>
  
  </apex:form>

</apex:page>

実際に使用する際は、Datepickerを表示するためのinputFieldはページに関わりがない項目を使用します。

例えば、コントローラ内にDatepickerを表示するためだけの取引先責任者を作ったりします。

Visualforce側の例です。

<apex:page id="Page" controller="DatePickerController" >

  <apex:form id="Form">
  
    <div style="display: none;">
      <apex:inputField id="BirthDate1" styleClass="" value="{!c.Birthdate}" />
    </div>
  
    <div>
      <apex:inputText id="hogeDate" styleClass="" Value="{!hogeDate}" onfocus="DatePicker.pickDate(true, '{!$Component.Page.Form.hogeDate}', false);" />
    </div>
  
  </apex:form>

</apex:page>

こちらはApex側です。

public with sharing class DatePickerController {

    // Datepickerを表示するための取引先責任者
    public Contact c{get;set;}
    // inputTextに使用する日付項目
    public Date hogeDate{get;set;}
    
    public DatePickerController(){
    
        c = new Contact();
    }
}

insertもupdateもdeleteもしない、誕生日を画面に表示するためだけの取引先責任者を使用しています。。

編集可能な日付項目であれば、別オブジェクトの別項目でも大丈夫です。

日付の入力が楽になると良いですね。