0

最近、自分の Web サイト用の jquery 日付ピッカーを見つけました。関連ファイルをインストールしましたが、ページに日付ピッカーが対象とする日付フィールドが 2 つあるため、問題が発生しています。現在、両方のフィールドの ID と名前 (「日付」) が同じ場合でも、2 つのフィールドの最初のフィールドでのみ機能します。日付ピッカーが使用する JavaScript は以下のとおりです。

<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"date",
        dateFormat:"%Y-%m-%d",
        isStripped:false,
        cellColorScheme:"armygreen",
        /*selectedDate:{                This is an example of what the full configuration offers.
            day:5,                      For full documentation about these settings please see the full version of the code.
            month:9,
            year:2006
        },*/
        yearsRange:[1978,2020],
        limitToToday:false,
        //cellColorScheme:"beige",

        imgPath:"img/",
        weekStartDay:1
    });
};

このコードのターゲット行に別のターゲットを追加する方法がわかりません。「dateA」と「dateB」をターゲットにするのが理想的です。

何か案は？私が馬鹿ならごめんなさい！ジョン

4

2 に答える 2

0 
<link rel="stylesheet" type="text/css" media="all" href="../css/jsDatePick_ltr.min.css" />
        <script type="text/javascript" src="../js/jsDatePick.min.1.3.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                new JsDatePick({
                    useMode:2,
                    target:"inputField1",
                    dateFormat:"%d-%M-%Y"

                });
                                new JsDatePick({
                    useMode:2,
                    target:"inputField2",
                    dateFormat:"%d-%M-%Y"

                });
                                new JsDatePick({
                    useMode:2,
                    target:"inputField3",
                    dateFormat:"%d-%M-%Y"

                });
            };
        </script>

<input type="text" size="12" id="inputField1" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField2" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField3" name="txt_ordate" class="ErrorField">
于 2013-03-04T10:41:04.903 に答える
0

最も信頼できる JQueryUI の datepicker を使用していることを確認してください。

JQueryUI に慣れていない場合は、http://jqueryui.com/demos/ にアクセスしてください(これができることを示しています)。

datepicker のライブ デモを見るには、http://jqueryui.com/demos/datepicker/ にアクセスしてください。オプション/イベント/方法を必ず確認してください! .

コードに関しては...

これらのスクリプトを に配置すると、 JQueryおよびJQueryUI<head>のスクリプトが提供されます。

<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#datepicker").datepicker({
            altField: "#result1, #result2",
            altFormat: "mm/dd/yy"
            //altFormat: "DD, d MM, yy" //another format
        });
    });
</script>
</head>

ボディには以下のものを使用しました。

<p>
Date: 
<input type="text" id="datepicker"> 
<input type="text" id="result1"> 
<input type="text" id="result2">
</p>​

私が行ったことを視覚的に確認するために、簡単なデモを作成しました。お気軽にご利用ください！

http://jsfiddle.net/6UnTh/23/

テーマをカスタマイズするには、http://jqueryui.com/themeroller/にアクセスして、必要なファイルをダウンロードします (それ以外の場合は、 で提供したものを使用して<head>ください)。

お役に立てれば！JQueryUI が提供する他のオプション/メソッドを必ず使用してください。ハッピーコーディング！

リンク: JQuery ( http://docs.jquery.com/Main_Page )
JQuery UI ( http://jqueryui.com/demos/ )



編集: (デモを更新しました!):

http://jsfiddle.net/6UnTh/27/

于 2012-08-02T21:30:26.153 に答える