0

このようなjqueryカレンダーコードがあります

<script>
$(document).ready(function() {
    $('#calTwo').jCal({
        day: new Date( (new Date()).setMonth( (new Date()).getMonth() + 2 ) ),
        days: 7,
        showMonths: 1,
        monthSelect:    true
    });
});
</script>

そして、私の体のコンテストでは次のように

<body>
<span id="calTwo"></span>
</body>

上記のコードは正常に動作していますが、私の要件は、span id タグを使用する代わりに、テキスト フィールドを使用し、テキスト フィールドに隣接して 1 つのカレンダー イメージを使用する必要があることです。その画像カレンダーをクリックすると表示され、選択した日付がテキスト フィールドに表示されます。

私は Jquery を初めて使用し、この機能を実装する方法がわかりません。

4

2 に答える 2

1

jCal を使用する代わりに、jQuery UI datepickerを使用することもできます

HTML:

Date: <input id="calTwo" type="text"></input>​

Javascript:

$(document).ready(function() {
    $('#calTwo').datepicker().option({"setDate": new Date()});
});​

例: http://jsfiddle.net/YQ7k8/ jsfiddle には jQuery UI css がないため、この例は醜いです。http://jqueryui.com/demos/datepicker/を見て、適切なテーマでどのように表示されるかを確認してください。

于 2012-05-25T06:16:28.557 に答える
0

何かのようなもの：

<input id="calTwo" /> <img src="..." id="calTwoIcon" />

<script>
$('#calTwoIcon').click(function() {
    $('#calTwo').focus();
});
</script>

それはあなたが探していたものですか？画像を配置し、呼び出されるとカレンダーを表示するカレンダー入力にフォーカスするクリックイベントを割り当てました。あるいは、あなたがすることができます$('#calTwo').trigger('click');。

于 2012-05-25T06:09:29.060 に答える