всплывающее окно выбора даты, которое не позволяет вводить значение вручную - PullRequest
Новая
       12

всплывающее окно выбора даты, которое не позволяет вводить значение вручную

0 голосов
/ 24 июня 2019

У меня есть одностраничное приложение, в котором пользователь должен заполнить данные.Одно поле - это поле даты и времени на панели.Мне бы хотелось, чтобы при рендеринге Panel с этим полем даты и времени всплывающее окно выбора даты и пользователь не могли вводить другие данные, кроме выбранного времени даты из средства выбора.

Iпрочитайте следующий пост Улучшение взаимодействия с пользователем с помощью средства выбора даты xpages

Мой тестовый 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()
})

}`

Когда отображается панель, мне все равно нужно нажать, чтобы открыть сборщик.После того как я выбрал дату, я все еще могу удалить ее из поля ввода, но не могу редактировать.Как можно, чтобы при рендеринге панели всплыло окно выбора даты?

1 Ответ

0 голосов
/ 25 июня 2019

view.postScript() может использоваться в SSJS для отправки CSJS для запуска после соответствующего обновления. Используйте это в кнопке «Показать панель» для запуска желаемого CSJS.

...