0

XHTMLでPrimefacesを使用していますが、WebページのPrimeFacesカレンダーの代わりに、アイコントリガー付きのjQueryのdatePickerを使用することにしました。日付ピッカーのコードは次のとおりです。

<h:panelGrid id="searchGrid" columns="3" styleClass="grid" columnClasses="one,two,three">
    <p:column>
        <h:outputLabel for="date" value="Date" />
    </p:column>
    <p:column>                  
        <script type="text/javascript">
            $(function() {
                $("#date").datepicker({
                    minDate : "#{indexBean.searchCriteria.mindate}",
                    maxDate : "#{indexBean.searchCriteria.maxdate}",
                    dateFormat : "dd/mm/yy",
                    showOn : "button",
                    buttonImage : "/style/images/calendar.png",
                    buttonImageOnly : true
                });
            });
        </script>
        <p:inputText id="date" value="#{indexBean.searchCriteria.date}" label="Date" validator="#{indexBean.validateDate}">
            <p:watermark value="eg: 01/01/2013" for="date" /> 
        </p:inputText>

ただし、datePickerのボタン（アイコン）はページに表示されません。足りないものはありますか？前もって感謝します

4

2 に答える 2

0

jQueryUIがインポートされていないようです。ページの先頭に次のようなものがあることを確認してください。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

また、JavaScriptをdatepicker入力要素の下に移動します。

<h:panelGrid id="searchGrid" columns="3" styleClass="grid" columnClasses="one,two,three">
<p:column>
    <h:outputLabel for="date" value="Date" />
</p:column>
<p:column>                  
    <p:inputText id="date" value="#{indexBean.searchCriteria.date}" label="Date" validator="#{indexBean.validateDate}">
        <p:watermark value="eg: 01/01/2013" for="date" /> 
    </p:inputText>

    <script type="text/javascript">
        $(function() {
            $("#date").datepicker({
                minDate : "#{indexBean.searchCriteria.mindate}",
                maxDate : "#{indexBean.searchCriteria.maxdate}",
                dateFormat : "dd/mm/yy",
                showOn : "button",
                buttonImage : "/style/images/calendar.png",
                buttonImageOnly : true
            });
        });
    </script>
于 2013-03-27T00:52:26.587 に答える
0

うん、私はそれを修正しました私が変更する必要があったのは1つの小さなものだけです

.dateまでの日付（内）

id = "date" to styleclass = "date"（in）ありがとうございました

于 2013-04-02T23:44:38.897 に答える