Force.com独自Javascript「DatePicker」のカスタマイズ

• Tweet
• 

Visualforceは、Force.com プラットフォームで使用するコンポーネントベースのユーザインターフェイスフレームワークです。Visualforceで提供される標準コンポーネントを使用することにより、データ型に基づいた入出力を容易に行うためのUIを実装することが可能となり、また、独自にスタイルを定義することなく、Salesforceの標準画面に準拠したデザインを実現することができます。今回はVisualforceの拡張をテーマにapex:inputFieldでDate型項目を使用した場合に実装されるJavascript「DatePicker」のカスタマイズ方法をご紹介します。

※Salesforceで提供されている、非公開JavascriptSourceはサポート対象外であり、変更される可能性もありますので、使用の際は自己責任でお願いいたします。
関連記事：「開発者として、Force.com独自CSSと上手に付き合いたい」


過去の日付に対応したDatePickerの利用方法
<apex:inputfield>として、Date型項目を使用した場合、DatePickerにより、カレンダー入力が可能になりますが、デフォルトで使用できる年は、現在年-1～現在年+5となっています。そのため、誕生日などの入力の際は、XXXX/XX/XXと手入力せざるを得ません。誕生日に対応した西暦年の入力を可能にするため、年リストを1900~現在年に修正する必要があります。

VisualForcePage<apex:inputField>で生成されたDatepickerのカスタマイズ
Date型で定義されたフィールドを<apex:inputField>でバインドした場合、自動的にSalesforceプラットフォームで提供されているDatePickerが実装されます。

VisualForcePage--- DatePicker_Page.page

<apex:page standardController="Contact">
 <apex:form id="f">
  <apex:pageBlock >
   <apex:pageBlockSection >                
    <apex:pageBlockSectionItem >
     <apex:inputField value="{!Contact.BirthDate}" id=" dateField" />
    </apex:pageBlockSectionItem>
   </apex:pageBlockSection>
  </apex:pageBlock>
 </apex:form>
</apex:page>

上記の例では、取引先責任者オブジェクトの誕生日を参照しています。 しかし、デフォルトで選択可能な西暦年は、誕生日を選択できるようにはなっていないため、Javascriptにより西暦年リストの編集を行い、デフォルトで追加されているリストを削除し、生年月日に対応する範囲の西暦年を追加する必要があります。

VisualForcePage--- DatePicker_Page.page（追記）

<script type="text/javascript">
function changeYears() { 
 //デフォルトで実装されているDatePickerの「年」リストを取得
 var yearselect = document.getElementById('calYearPicker');
 var range = 2011 - 1900;

 //一度リストを削除
 for(var i=0; yearselect.length = 0; i++){
  yearselect.options[i] = null;
 }
 for(var i=0; i < range;i++) {
  var newOption = document.createElement('option');
  newOption.text = 1900 + i;
  newOption.value = 1900 + i;
  yearselect.add(newOption, null);
 }
}
</script>

上記、changeYearsメソッド内部で参照しているドロップダウンリストオブジェクト” calYearPicker”は、画面のOnLoad時点では描画されておらず、参照することはできないため、OnFocusで画面描画時に呼び出されるようにしなければなりません。しかし、でDate型の項目を使用した場合、OnFocus属性を指定しても、onFocus属性の中身自体が、DatePicker.pickDateメソッドの呼び出しに上書きされてしまうため、DatePicker.pickDate内部の処理として、カレンダーの描画後にchangeYearsメソッドが呼ばれるようにする必要があります。

VisualForcePage--- DatePicker_Page.page（script内追記）

DatePicker.pickDate = function(callOnChange,field,hasTime,element){
 if(!DatePicker.datePicker){
  DatePicker.datePicker = new DatePicker();
   // 西暦年編集メソッドの呼び出しの追記
   changeYears();
 }
 DatePicker.datePicker.show(callOnChange,field,hasTime,element);
}

上記5行目のメソッド呼び出し以外は、salesforceプラットフォームで使用されているmain.jsで、もともと実装されているDatePicker.pickDateと同じものになります。デフォルトで実装されているfunctionを上書きする形で処理を記述します。

Salesforceプラットフォームで使用しているmain.jsのDatePicker.pickDateメソッドを上書きし、西暦年編集メソッドで過去の西暦年をセットすることにより、標準コンポーネントとして機能しているUIの挙動を一部カスタマイズすることが可能になります。 <apex:inputfield>に限らず、<apex:inputtext>でも、OnFocus属性からDatePickerを呼びだし、カレンダーを使用することが可能です。

Posted by Yoshida Tokuji