Question

我有一个一页应用程序，用户需要在其中填写数据。一个字段是面板中的日期时间字段。我希望在使用此日期时间字段呈现面板时，弹出日期时间选择器，并且用户除了从选择器中选择的日期时间之外，无法输入其他数据。

我阅读了以下帖子Improving user interaction with xpages date picker

我的测试Xpage如下：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
    <xp:script src="/date.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:button value="Show Panel" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:viewScope.showPanel="yes";}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>
<xp:panel id="panel1">
    <xp:this.rendered><![CDATA[#{javascript:viewScope.showPanel=="yes"}]]></xp:this.rendered>
    <xp:inputText id="inputText1">
        <xp:this.converter>
            <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
        </xp:this.converter>
        <xp:dateTimeHelper></xp:dateTimeHelper>
    </xp:inputText>
    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[improveDatePicker("#{id:inputText1}")]]></xp:this.script>
    </xp:eventHandler>
</xp:panel>
<xp:eventHandler event="onClientLoad" submit="true"
    refreshMode="norefresh">
    <xp:this.action><![CDATA[#{javascript:viewScope.showPanel="NO";}]]></xp:this.action>
</xp:eventHandler>
</xp:view>

date.js是MarkyRoden的脚本：

`function improveDatePicker(idTag){

//Select the BUTTON within the container
var calButton = x$(idTag+"_Container", " .dijitButtonContents")
//Select the dateField
var dateField = x$(idTag)
//When focusing on the field click the button
dateField.focusin(function (){
    calButton.click()
})
//When pressing a key in the field
dateField.keypress(function(evt){
//prevent the event from completing
    evt.preventDefault()
})

}`

显示面板时，我仍然必须单击以打开选择器。选择日期后，我仍然可以将其从编辑框中删除，但无法对其进行编辑。渲染面板时如何弹出日期时间选择器？

Answer 1

view.postScript()可以在SSJS中用于发送CSJS以在相关刷新后运行。在“显示面板”按钮中使用它来运行所需的CSJS。

弹出的日期选择器，不允许手动输入值

1 个答案: