2

日時ピッカーの動作を少し調整しました。選択の変更時にトリガーされます。

しかし、今はテキストボックスに入力できません。テキスト ボックスは、日時だけでなく、ユーザーがアプリケーションに他の種類の情報を入力できるようにするためにも使用します。

ユーザーがこのテキスト ボックスに入力できるようにするにはどうすればよいですか? したがって、他のすべての設定はそのままです。Datepicker は、選択した変更時にのみトリガーされます。テキストボックス自体をクリックするのではありません。

jsfiddle サンプル

htmlコード

<input id="datetime" type="text" name="datetime" value="" >
<select size=5>
    <option value="not">Not this one</option>
    <option value="not">Not this one</option>
    <option value="not">Not this one</option>
    <option value="datetimepicker">Select date and time</option>
</select>​

JavaScriptコード

$('#datetime').datetimepicker({
    showOn: "button",
});
$('option[value=datetimepicker]').click(function() {
    $('#datetime').datetimepicker('show');
});
​

CSSコード

.ui-datepicker-trigger{display:none;}​
4

1 に答える 1

2

このコードは、デフォルトで INPUT を無効にし、それから datetimepicker を「ボタン」にするため、INPUT フィールド内にテキストを出力できません。

$('#datetime').datetimepicker({
    showOn: "button",
});

さらに見てみましょう：

$('option[value=datetimepicker]').click(function() {
  // This part of code will work when you click inside SELECT field
}

では、SELECT 内をクリックしたときに、入力を datetimepicker に変換する必要がありますね。

これを行うには、datetimepicker の初期化を前のブロック内に移動するだけです。

$('option[value=datetimepicker]').click(function() {
    $('#datetime').datetimepicker({
        showOn: "button",
    });
    $('#datetime').datetimepicker('show');
});

これで、SELECT が押されるまで、内部入力を入力できます。SELECT を押すと、データピッカーが起動し、INPUT フィールドのテキストが消えます。

これが修正されたフィドルです：http://jsfiddle.net/dPRjS/9/

更新しました：

datetimepicker が閉じられた後に INPUT を編集する可能性を追加するには、フィールド INPUT で作成された datetimepicker を破棄して、INPUT として機能する可能性を戻す必要があります。

INPUT フィールドをクリックしたときに、このアクションを有効にする必要があります。

$('#datetime').click(function(){
     $('#datetime').datetimepicker( "destroy" );
 });

更新されたフィドルの作業: http://jsfiddle.net/dPRjS/10/

于 2012-06-17T23:53:03.840 に答える