7

ユーザーが日付を選択できるように、bootstrap-datepicker ライブラリを使用して datepicker を作成しています。ユーザーが入力フィールドやボタンをクリックしたときだけでなく、常にピッカーを表示したいと思います。

これどうやってするの？

日付ピッカーの画像

4

3 に答える 3

10

まず、ライブラリの最新バージョン(現在は 1.2.0) を使用していることを確認してください。eyeconによる元のバージョンは文書化がかなり不十分であり、それであなたが望むことができるかどうかはわかりません。

問題を解決するには、いくつかの方法があります。これらのいずれかを使用します。

  1. 埋め込み/インラインの日付ピッカーを作成し、それにchangeDateハンドラーを追加します。次のようなHTMLが必要になります

    <input id="my-input">
<div id="my-datepicker"></div>

    および次の JavaScript:

    $("#my-datepicker").datepicker().on('changeDate', function (e) {
    $("#my-input").text(e.format());
});

    これは、ドキュメントのイベントe.formatページに記載されている便利なメソッドであり、このまま呼び出されると、日付ピッカーの書式文字列に従って書式設定された、選択された日付を表す文字列を返すことに注意してください。

    このアプローチを取る場合は、独自の CSS を使用して日付ピッカーを適切に配置する必要があります。

    これを実際に示している JSFiddle を次に示します: http://jsfiddle.net/4wFJc/3/

  2. 通常の入力 datepickerを使用し、作成時に明示的に表示してから、datepicker のhide()メソッドを no-op に置き換えて、非表示にならないようにします。

    言うまでもなく、これは醜いハックであり、ライブラリの将来のバージョンでは機能しなくなる可能性があります。私はそれを使用することをお勧めしません。ただし、日付ピッカーを配置し、それをあなた<input>に接続する矢印を含めるというインラインブロックアプローチよりも（疑わしい）利点があるため、完全を期すために含めます。

    次のような HTML が必要です。

    <input id="my-input">

    および次の JavaScript:

    $input = $("#my-input");
$input.datepicker();
$input.data('datepicker').hide = function () {};
$input.datepicker('show');

    これは、このアプローチを実際に示している JSFiddle です: http://jsfiddle.net/4wFJc/4/

于 2014-01-06T22:32:06.930 に答える
0

私はこの日付ピッカーを使用していないので、使用方法に慣れていません。手っ取り早い方法は、datepicker ドロップダウン メニュー クラスに.datepicker.CLASSNAME {display: block !important;}. このようにして、ドロップダウンは常に表示されます。

于 2013-12-08T08:06:32.113 に答える
-2

この日付ピッカーを使用している場合: http://www.eyecon.ro/bootstrap-datepicker/

メソッドがあることがわかります: .datepicker('show')

$(document).read() のときに datepicker オブジェクトでこれを呼び出します

于 2013-12-08T20:32:05.347 に答える