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 は問題なくフィールドにバインドされます。モデル ボックスが表示され、時間を選択できる時間を選択しようとすると、フィールドから離れた場所をクリックしてモデル時間コントロールを閉じようとすると、エラーが発生します。