【问题标题】:readOnlyInput doesn't work in p:calendar primefacesreadOnlyInput 在 p:calendar primefaces 中不起作用
【发布时间】:2013-05-03 16:49:39
【问题描述】:

我用这个:

    <p:calendar id="popupCal" yearRange="c:c+1" lang="fr" required="true"
                requiredMessage="Date obligatoire" readonlyInput="true"
                navigator="true" pattern="dd-M-yyyy" locale="fr"
                showOn="both" value="#{commandeMB.commande.dateCmd}"
                mindate="#{commandeMB.todaysDate}" />

正如我所写,我将 readonyinput 设置为 true

我也测试了只读为真,两者都为真但没有结果,总是可以更改日期

这是一个错误吗?

谢谢你

【问题讨论】:

    标签: jsf-2 primefaces calendar readonly


    【解决方案1】:

    如果您希望该用户不能更改日历日期的值,只需查看它,然后在 p:calender 属性中使用 showOn="none"readonly="true",我已经使用它并且它正在工作(我使用 Primefaces 5.0 希望它适用于所有版本):

    【讨论】:

      【解决方案2】:

      readonly 用于当您只允许用户使用面板选择日期并且不能从输入中更改日期时。如果您希望用户不能更改日期,则必须使用disabled 属性来做到这一点。

      如果您希望用户可以看到日期选择器并且不能更改日期,您可以通过以下方式禁用日期选择事件:

      <p:calendar onfocus="$('#ui-datepicker-div td').unbind();" readonly="true"/>
      

      【讨论】:

      • 但禁用后,组件显示不佳
      • @begiPass:那你想要什么?
      【解决方案3】:

      实际上,我发现问题出在大小写上。在我们的应用程序中,它是 readonlyInput,这就是它的工作原理。 readOnlyInput 没有。

      【讨论】:

        【解决方案4】:

        使用 PF 3.4,此解决方案将:

        • 在只读文本输入字段上保留 1.0 不透明度 (即,不要使用 disabled=true 来调暗不透明度);
        • 从字段中删除 Datepicker 类;
        • 从字段中取消绑定事件。

        (1) 创建函数:

        function setCalendarVis(readOnly) { if(readOnly) $('input:text').removeClass('hasDatepicker').unbind(); }

        (2) 定义一个日历组件:

        &lt;p:calendar readonly="#{bean.readonly}" value="#{bean.datefield}" mode="popup"/&gt;

        (3) 例如,可以通过 p:databable 上的 ajax 事件调用该函数:

        &lt;p:ajax event="rowDblselect" update="@form" oncomplete="setCalendarVis(#{bean.readonly});"/&gt;

        我的应用程序使用不同样式的读写功能:

        我对 unbind() 的使用相当暴力。您可以对其进行细化以仅取消绑定特定事件

        穿上火焰套装!

        【讨论】:

          【解决方案5】:

          只需在输入中添加[readonlyInput]="true" 属性即可。

          例子:

           <p-calendar [readonlyInput]="true">
          

          【讨论】:

            【解决方案6】:

            这就是我实现只读行为的方式:

            <p-calendar [readonlyInput]="true" [showOnFocus]="false">
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2023-01-31
              • 2023-04-10
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2013-08-09
              • 2014-09-07
              相关资源
              最近更新 更多