4

xpage アプリケーションのブートストラップ dateTimePicker コントロールに問題があります。これは、xPages がコントロール ID を生成する方法に関係していると思われます。

次のコードは、inputText 要素に id がなくても正常に機能します。

<script type="text/javascript" src="/fPath/jquery-min.js"></script>
<script type="text/javascript" src="/fPath/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/RfPath/bootstrap-datetimepicker-3.0.0/js/moment.min.js"></script>
<script type="text/javascript" src="/fPath/bootstrap-datetimepicker-3.0.0/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' data-datetimepicker="true">
    <xp:inputText styleClass="form-control timePicker">
        <xp:this.converter>
            <xp:convertDateTime type="time" timeStyle="short" />
        </xp:this.converter>
    </xp:inputText>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div> 

ID を追加し直すとすぐに、コントロールの外をクリックすると次のエラーが表示されます。

エラー: 構文エラー、認識できない式: サポートされていない擬似: _id1

データをドキュメントにマップするためにIDが必要ですが、実際にはdatetimepickerを添付するためにIDを使用していません-これにはクラスを使用しています:

$('.timePicker').each(function(i,el){SHARED.timePickerOpen(el)}) 

SHARED = {
    timePickerOpen: function(el){
        $(el).datetimepicker({
            pickDate: false,
            pickTime: true,
            useCurrent: true,
            minuteStepping:5  
        });
    }
}

更新#1:

少し誤解が生じているように聞こえるので、さらに説明しようとします...

  • テストでは、フィールドに ID を与える純粋な html でコードを書き、正常に動作しました。
  • xpage フィールド (ドミノがコロンを使用して ID を生成する場所) を使用すると、上記のエラーで日付ピッカーが失敗します。
  • ID を使用してイベントをフィールドにバインドしません。クラスを使用してフィールドを取得し、datetimepicker コントロールをそれにバインドします。

問題は、フィールド ID を使用する datetimepicker にあるようです。クラス名(IDではない)からフィールドを取得しても、フィールドにIDが見つかった場合、datetimepickerコードはIDを使用したいと思われます。datetimepicker は問題なくフィールドにバインドされます。モデル ボックスが表示され、時間を選択できる時間を選択しようとすると、フィールドから離れた場所をクリックしてモデル時間コントロールを閉じようとすると、エラーが発生します。

4

2 に答える 2