0

JQueryDatepickerを実装したいと思います。JSFコードにJavaScriptを追加しました。これはHTML出力です：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
            <title>DX-57 History Center</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
            <link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
            <link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
            <link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

            <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
            <link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="resources/js/tabs.js"></script>
        <script type="text/javascript">
            $(function(){                                
                // Datepicker
                $('#datepicker').datepicker({
                    inline: true,
                    showWeek: true,
                    firstDay: 1
                });
            });            
        </script><script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;stage=Development"></script></head><body>
        <!-- demo inset for with validator -->
        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
                <li><a href="/SR_57-1.0-SNAPSHOT/UserNav.jsf" class="dir">Home</a>
                    <ul>
                        <li><a href="Dashboard.jsf">Dashboard</a></li>
                    </ul>       
                </li>
                <li><a href="Sessions.jsf" class="dir">Sessions</a>
                </li>
                <li><a href="Application.jsf" class="dir">Application</a>
                    <ul>                
                        <li><a href="Glassfish.jsf">Glassfish</a></li>
                    </ul>
                </li>
                <li><a href="Linux.jsf" class="dir">Linux</a>                   
                </li>
                <li><a href="Database.jsf" class="dir">Database</a> 
                    <ul>                
                        <li><a href="History.jsf">History</a></li>
                    </ul>
                </li>                   
            </ul>          

        </div>  

        <div id="logodiv" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:350px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">
<form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt13" value="j_idt13" />

                        <div id="settingsdiv" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px"><table>
<tbody>
<tr>
<td>Session ID</td>
<td><input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /><span id="j_idt13:sessionidMessage"></span></td>
</tr>
<tr>
<td>Date</td>
<td><input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /></td>
</tr>
<tr>
<td>Login Time</td>
<td><input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /></td>
</tr>
<tr>
<td>Last Refresh Time</td>
<td><input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /></td>
</tr>
<tr>
<td>User IP</td>
<td><input id="j_idt13:userip" type="text" name="j_idt13:userip" /></td>
</tr>
</tbody>
</table>


                        </div>   

                        <div id="settingstwodiv" style="width:150px; height:60px; position:absolute;  background-color:transparent; top:380px; left:800px"><input type="submit" name="j_idt13:j_idt32" value="Create User" />

                        </div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autocomplete="off" />
</form> 

                </div>   

            </div>  
        </div></body>
</html>

しかし、入力ファイルをクリックしても何も起こりません。何か足りないものはありますか？私が見つけた例では、カレンダーが<div id="datepicker"></div>表示に使用されていました。この例では、入力フィールドを使用しています。

幸運をお祈りしています

編集

divカレンダーのみを視覚化するために追加しました。

ここに追加しましdivた：

<h:panelGrid columns="2">
                                <h:panelGroup>Session ID</h:panelGroup>
                                <h:panelGroup>
                                    <h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" 
                                                 validator="#{ValidatorController.validatebean}">                                        
                                        <f:ajax event="blur" render="sessionidMessage" />                                          
                                    </h:inputText>
                                    <h:message id="sessionidMessage" for="sessionid" />
                                </h:panelGroup>

                                <h:panelGroup>Date</h:panelGroup>
                                <h:panelGroup>
                                     <div id="datepicker"></div>
                                    <h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" >                                       
                                    </h:inputText>
                                </h:panelGroup>

                                <h:panelGroup>Login Time</h:panelGroup>
                                <h:panelGroup>
                                    <h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
                                        <f:validateLength minimum="0" maximum="35"/>
                                    </h:inputText>
                                </h:panelGroup>

                                <h:panelGroup>Last Refresh Time</h:panelGroup>
                                <h:panelGroup>
                                    <h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
                                        <f:validateLength minimum="0" maximum="35"/>
                                    </h:inputText>
                                </h:panelGroup>

                                <h:panelGroup>User IP</h:panelGroup>
                                <h:panelGroup>
                                    <h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
                                        <f:validateLength minimum="0" maximum="15"/>
                                    </h:inputText>
                                </h:panelGroup>

                            </h:panelGrid>

ここに画像の説明を入力してください

ここでこの例のようにカレンダーを開きたいのですが、入力フィールドをクリックしたときです。

JSFでカレンダーを呼び出す方法は他にもあるようです。

編集2

このJavaScriptは正しいですか？

function calendar(){                                
    // Datepicker
    datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });
}

私はそれをこのコードで呼びます：

<h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" >
4

6 に答える 6

3

datepickeridがここにありません。間違ったIDを呼び出しています。このよう:にして、スラッシュを使用して属性で使用しました

$(function(){
    $('#j_idt13\\:datepicker').datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });
});
于 2012-05-16T09:19:44.040 に答える
2 
 <script type="text/javascript">
            $(function(){                                
                // Datepicker
                $('#j_idt13:logintime').datepicker({
                    inline: true,
                    showWeek: true,
                    firstDay: 1
                });
            });            
        </script>

これに変更してください。セレクターが間違っていました。

于 2012-05-16T09:19:37.690 に答える
2

「#datepicker」を入力ボックスのIDにする必要があります。

例えば

        $(function(){                                
            // Datepicker
            $('#j_idt13:datepicker').datepicker({
                inline: true,
                showWeek: true,
                firstDay: 1
            });
        });

jqueryセレクターの調査をお勧めします。

于 2012-05-16T09:19:48.880 に答える
2

HIyaデモ http://jsfiddle.net/8Hp26/

IDが異なり、HTMLを生成するために何らかのテンプレートまたはユーザーコントローラーを使用しているように見えます。デモでは、新しいclass = fooを追加しました。または、:JQueryでエスケープしてみてください。

エスケープ追加を使用することに注意\\:してください。ただし、クラスを追加すると、デモに示すようなトリックが実行されます。

お役に立てれば。

コード

 $(function(){                                
            // Datepicker
          //  $('#datepicker').datepicker({
         $('.foo').datepicker({                
                inline: true,
                showWeek: true,
                firstDay: 1
            });
        });​
于 2012-05-16T09:22:02.337 に答える
1

入力フィールドのIDはではありませdatepickerんj_idt13:datepicker。datepickerコンポーネントを呼び出すときは、次のIDを使用する必要があります。

$(function(){
    $('#j_idt13\\:datepicker').datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });
});

これは、jQueryで使用されているように\\をエスケープするためのものです。:

ただし、IDを含まない :IDを使用することをお勧めします。

于 2012-05-16T09:18:47.257 に答える
0

これはJSF固有です。JSstyleClass="datepicker"を呼び出すにはを使用する必要があります。#datepicker

于 2012-05-16T18:24:30.807 に答える