Question

如果我使用标准日期选择器控件，在普通的xpage上，一切都运行正常，但是，如果我在一个模态中，当我调用模态，并且字段显示正常，但如果我然后单击选择器图标，日历只会闪烁，只是消失，所以我实际上无法选择日期。

有没有人对此有任何问题/解决方案？下面的模态代码：

<!-- Modal ONE -->
    <div class="modal fade" data-keyboard="false" data-backdrop="static"
        tabindex="-1" role="dialog" id="modalDueDate">

        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header modal-header-default">
                    <h4 class="modal-title">Change Due Date</h4>
                </div>
                <div class="modal-body">

                    <xp:inputText id="dtChangeDueDate">
                        <xp:dateTimeHelper id="dateTimeHelper1" />
                        <xp:this.converter>
                            <xp:convertDateTime type="date" />
                        </xp:this.converter>
                    </xp:inputText>
                </div>

                <div class="modal-footer">
                    <xp:button type="button" styleClass="btn btn-danger" id="button4">

                        <xp:this.attrs>
                            <xp:attr name="data-toggle" value="modal" />
                            <xp:attr name="data-target" value="#modalDueDate" />
                        </xp:this.attrs>
                        Cancel
                    </xp:button>

                    <xp:button type="button" styleClass="btn btn-success" id="button5">
                        <xp:this.attrs>
                            <xp:attr name="data-toggle" value="modal" />
                            <xp:attr name="data-target" value="#modalDueDate" />
                        </xp:this.attrs>
                        Update

                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="complete">
                            <xp:this.action><![CDATA[#{javascript:try{

var noteID:string = compositeData.noteID;
print ("Parent NoteID: " + noteID)

var doc:NotesDocument = database.getDocumentByID(noteID);
var dueDate = getComponent("dtChangeDueDate").getValue();
//var oldDueDate = doc.getItemValueString("DueDate");

var docWrap = wrapDocument(doc);

var dt = new Date();
var arrHistory:array = AddObjectivesHistoryItem(docWrap, dt, "Due Date Changed To "+dueDate, userBean.displayName);

docWrap.replaceItemValue("DueDate",dueDate);
docWrap.save();

var o = {}
o.title = "Due Date Updated";
o.body = "The due date has been succesfully updated to " + dueDate;
o.alertIcon = "fa-thumbs-up fa-lg";
o.autoClose = true;
o.alertType = "success";
//o.growl = true;
requestScope.put("alertServer",o)


}catch(e){
    openLogBean.addError(e,this.getParent());
}}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>

                </div>
            </div>
        </div>
    </div><!-- Modal ONE End-->

Answer 1

检查模态和日期时间助手的相对z-index css设置。我不知道模态的z-index是否将它放在选择器前面。我还会在您使用的任何浏览器开发者工具中查看“网络”标签，以查看是否存在任何异常情况。

XPages模态中的日期选择器

1 个答案: