web-dev-qa-db-ja.com

入力なしのjQuery datepicker

日付を選択するUIを追加したい、かなり複雑なWebアプリがあります。

私が遭遇している問題は、日付ピッカーがいつどのように表示されるかを実際に制御する方法をドキュメントから理解できなかったことです。関連するフォーム要素はない（そして、私は秘密のフォームフィールドを追加するつもりはない）ので、非常に単純なすぐに使えるアプローチは単に機能しません。

プログラムで日付ピッカーを呼び出すことができるパターンについて、誰かが小さなガイダンスを提供できることを願っています。 datepickerのカスタムイベントを使用して初期化して配置し、選択した値をユーザーが閉じたときに回復する方法を知っていると思います。日付ピッカーを要素にペアリングしていないため、日付ピッカーのインスタンス化に苦労しています。

ではないは次のとおりです。

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
    );

}

その理由は、「jQuery.datepicker」は関数ではないためです。 （私は間違っています。）

私は「ダイアログ」アプローチとは結婚していません。フォーム要素を参照せずにダイアログを呼び出すのは、私の推測でした。

私はjQuery 1.4.3とjQueryUI 1.8.6を使用しています

javascriptjqueryjquery-uidatepicker
19
Tom

日付ピッカーのコードを読みましたが、書かれているように、日付ピッカーは、入力、div、またはスパンタグにアタッチする必要があります。

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

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

9
jimmym715

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

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


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

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

15
Ricardo Souza

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

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

そして使う

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });
0
Shehzad