6

以下のようなjQuery UIカレンダーがあり、ChromeではなくIEでのみ機能します。

<input type="image" src="/images/caleder.jpg" id="btnCalendar" />

<script type="text/javascript">
$(function () {
    $("#btnPeriodCal").datepicker();
});
</script>

私が変更した場合type="text"、それはうまくいくようです。上記の問題を解決する方法を教えてください。type="text"画像を表示する必要があるため、使用できません。

ありがとう。

4

7 に答える 7

13

日付ピッカーのサンプル問題があります。

日付ピッカーを使用しましたが、Firefox と IE では正常に機能しましたが、Chrome では機能しませんでした。入力欄をクリックするとカレンダーが表示されます。日付を選択しましたが、日付の値が入力フィールドに入力されません。

オプションがないので、変更type='text'してからクロムで動作します..

入力タイプは日付です

入力タイプはテキストです

于 2012-11-09T05:50:02.333 に答える
4

ハンドラーを使用できます。

<script>
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>

これがうまくいくことを願っています！:)

于 2012-06-07T13:04:10.593 に答える
1

私も同じ問題を抱えていました。そして、なぜ入力が機能するのかと思いましたが、ボタンは機能しませんでした。秘訣は、クリックすると入力がフォーカスされ、ボタンがフォーカスされないことです。これを試して：

$(function () {
    $("#btnPeriodCal").datepicker().click(function () { $(this).focus(); });
});
于 2012-08-22T02:49:55.733 に答える
0

同様の問題がありました。リンクがクリックされたときに日付ピッカーを表示し、フィールド（または非表示のフィールド）を持たせたくありませんでした。（私の使用例は、カレンダーの日付を使用して、その日付ピッカーの選択までの日付の範囲を検索することでした。したがって、onSelectハンドラーに渡される場合を除いて、実際の日付値は必要ありません。）

したがって、これはFirefoxで機能します。

<a ...>click for calendar:   <input type="hidden" value="" />  </a>

しかし、Chromeではありません。を次のように置き換えます。

<input type="text" value="" style="display: none" />

また失敗しました。私はこれで終わった：

<input  type="text" value="" style="width: 0px; height: 0px; border: none; position: absolute; top: 0; left: 0" />

私はそれを誇りに思っていませんが！

于 2013-01-04T18:05:01.957 に答える
0

私が間違っていない限り、日付ピッカーになることができるのはdivタグ、spanタグなどだけです。

于 2012-06-07T13:03:39.933 に答える
0

として使用してください-

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

$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});

実際の動作を確認してください-http://jqueryui.com/demos/datepicker/#icon-trigger

<head>そして、これらのファイルをタグに含めることを忘れないでください

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">

于 2012-06-09T07:29:35.090 に答える
0

私はこの問題を解決するために 3 時間を費やしましたが、これが私が問題を解決した方法です。

次の行をライブラリとして使用します。

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

これは、問題を修正するために使用される JavaScript です。

$(function() {
    $("#date_of_birth_date").datepicker({ 
        maxDate: '+0', changeYear: true, yearRange: "-70:+0" 
    });
});

以前のライブラリなどをすべて削除することを忘れないでください

于 2013-10-23T21:10:45.847 に答える