19

I've got a fairly complex web app that I'd like to add some date-picking UI to.

The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.

I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.

Here's what isn't working:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
    var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );

    jQuery.datepicker('dialog',
        (bIsDate ? new Date(sOriginal) : new Date()), // date
        function() { console.log('user picked a date'); }, // onSelect
        null, // settings (i haz none)
        event // position
    );

}

The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)

I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.

I'm using jQuery 1.4.3 and jQueryUI 1.8.6

4

3 に答える 3

16

プラグインページから: http://jqueryui.com/demos/datepicker/#inline

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


<div class="demo">
    Date: <div id="datepicker"></div>
</div><!-- End demo -->

オーバーレイではなく、ページに埋め込まれた日付ピッカーを表示します。入力の代わりに div で .datepicker() を呼び出すだけです。

于 2012-04-21T02:10:42.157 に答える
11

datepicker のコードを読んだところ、書かれているように、datepickerはinput、div、または span タグにアタッチする必要があるようです。

したがって、唯一の異議がフォーム要素を使用することである場合、div または span にアタッチすることがおそらく最善の策であり、その方法の例がここにあります: https://stackoverflow.com/a/1112135

datepicker を制御する別の方法を探している場合は、datepicker コードを拡張して目的を実行する必要がある場合があります。そのルートに進む場合は、_inlineDatepicker プライベートを確認することから始めることをお勧めします。これは、datepicker を div または span タグにアタッチするメソッドです。

于 2012-04-21T01:43:19.400 に答える
0

入力フィールドを動的に定義してから、新しく作成したクラスに日付ピッカーをアタッチする必要があります。フィールドなしでは、そうは思いません。

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

と使用

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });
于 2012-04-20T21:42:57.940 に答える