function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Matsuda RisaMatsuda Risa 

検索画面について

いつもお世話になっております。

現在、下記のような検索画面をVisualforce/Apexにて実装しております。
検索条件にチェックをかけたい場合、どのような方法で実装するのがベストなのでしょうか。
【前提条件】
・日付の検索条件はカレンダーピッカー付きが好ましい
・検索項目用仮想オブジェクトクラスを作成し、inputfieldで実装すればエラー判定ロジックを書かなくても良いかと思ったが、実装できず
・onfocus="DatePicker.pickDate()"を利用して実装すれば可能だと思われるが、検索ボタン押下時にエラー判定ロジックを記載しなければならない

お手数お掛けいたしますが、検索画面の開発経験がお有りになる方がいらっしゃいましたら
ご教示いただけますと幸いです。


User-added image
Taiki YoshikawaTaiki Yoshikawa
検索条件だけで使用するカレンダーピッカー付きの日付入力欄を表示させたいという感じでしょうか。古いブラウザでは対応していない可能性がありますが、docType="html-5.0"を宣言して『input type="date"』タグを利用する方法が使えるかもしれません。

User-added image
<apex:page controller="HTML5DateSearchController" docType="html-5.0" sidebar="false">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Date" />
                    <apex:outputPanel >
                        <apex:input type="date" value="{!startDate}" />
                        <apex:outputText value=" 〜 " />
                        <apex:input type="date" value="{!endDate}" />
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
public with sharing class HTML5DateSearchController {
    
    public Date startDate {get; set;}
    public Date endDate {get; set;}
    
    public HTML5DateSearchController() {
        this.startDate = null;
        this.endDate = null;
    }
}
この方法ならオブジェクトに検索専用日付項目を作成したりせずに、カレンダーピッカー付きの入力欄を表示することが可能です。日付形式の判定もやってくれます。(日付以外の形式をセットするとNULLとして扱われたと思います。)

注意点としては古いIEでは動作しなかったと思います。IE8やIE9ではHTML5事態に対応してなかったということがありました。
Taiki YoshikawaTaiki Yoshikawa
もしくはJSライブラリの『datepicker』を使って対応する方法が使えるかもしれません。日付判定などJS側で実装する必要がありますが、IEでも動作したと思います。
http://js.studio-kingdom.com/jqueryui/widgets/datepicker

JS側実装のサンプルです。
https://gist.github.com/tyoshikawa1106/9af97ab6c43905cd2ec5