71

ユーザーが画像をクリックしたときに JQuery Datepicker を開きたい。選択した日付が後に表示される入力フィールドはありません。入力した日付を Ajax 経由でサーバーに保存するだけです。

現在、私はこのコードを持っています:

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

しかし、画像をクリックしても何も起こりません。また、datepicker() 呼び出しの結果をグローバル変数に保存してから、画像の onclick() イベントから datepicker('show') を呼び出してみましたが、結果は同じです。

4

8 に答える 8

118

単純な非表示の入力フィールドが機能することがわかりました。

<input type="hidden" id="dp" />

そして、通常のように、画像に buttonImage 属性を使用します。

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

最初にテキスト入力フィールドを試してからdisplay:noneスタイルを設定しましたが、ユーザーがクリックした場所ではなく、ブラウザーの上部にカレンダーが表示されました。しかし、隠しフィールドは希望どおりに機能します。

JSFiddle

于 2009-07-14T18:42:50.033 に答える
24

jQuery のドキュメントによると、入力ボックスに関連付けられていない場合、datePicker を SPAN または DIV にアタッチする必要があります。次のようなことができます。

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>

JSFiddle

于 2009-07-10T21:39:03.483 に答える
23

入力フィールドとアイコンを使用している場合 (この例のように):

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

次のように、datepicker をアイコンにアタッチできます (私の場合は、CSS を介した A タグ内)。

$("#Hasta").datepicker();
  $("#Hasta_icono").click(function() { 
   $("#Hasta").datepicker( "show" );
  });
于 2010-03-27T18:03:36.940 に答える
8

マウスをカレンダーアイコンの上に置いたときに「...」を変更するには、日付ピッカーオプションに次を追加する必要があります。

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',
于 2011-03-02T06:59:45.090 に答える
3

HTML:

<div class="CalendarBlock">
    <input type="hidden">
</div>

CODE:

$CalendarBlock=$('.CalendarBlock');
$CalendarBlock.click(function(){
    var $datepicker=$(this).find('input');
    datepicker.datepicker({dateFormat: 'mm/dd/yy'});
    $datepicker.focus(); });
于 2009-12-22T22:59:05.173 に答える
2

非表示の入力フィールドがあると、datepicker ダイアログの配置に問題が発生します (ダイアログは水平方向の中央に配置されます)。ダイアログのマージンを変更することもできますが、もっと良い方法があります。

入力フィールドを作成し、不透明度を 0 に設定し、幅を 1px にして「非表示」にするだけです。また、ボタンの近く (または下)、または日付ピッカーを表示したい場所に配置します。

次に、日付ピッカーを「非表示」入力フィールドにアタッチし、ユーザーがボタンを押したときに表示します。

HTML:

<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">

CSS:

#date-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height 30px;
}

#date-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 32px; // height of the button + a little margin
    opacity: 0;
}

JS:

$(function() {
   $('#date-field').datepicker();

   $('#date-button').on('click', function() {
      $('#date-field').datepicker('show');
   });
});

注: すべてのブラウザーでテストされているわけではありません。

于 2014-12-12T08:36:51.517 に答える