【问题标题】:p:calendar: Is it possible to enable a user either pick or enter a date, and then clear the input, if needed?p:calendar: 是否可以让用户选择或输入日期,然后在需要时清除输入?
【发布时间】:2012-12-19 11:03:06
【问题描述】:

我想使用<p:calendar>,但我似乎找不到使用户能够清除以前输入的值的方法。例如,使用“全选”和“退格”清除输入只会导致验证(转换)错误。更复杂的是,我还在输入字段上放置了一个 jQuery 掩码“99/99/9999”。

是否可以让用户在 <p:calendar> 小部件中选择或输入日期,最重要的是,如果需要,允许他们清除输入?

同样,用户需要能够手动或使用日期选择器输入日期值。

到目前为止,jquery 日期掩码(即__/__/____)似乎与用户无法简单地在其输入上加空格有关...即,原始手动输入的值只是在提交按钮时重新出现按下。 --不幸的是,我需要提供一个日期输入掩码来指导用户手动输入日期时的正确输入格式。

以下是小部件外观的示例:

<p:calendar 
    pattern="MM/dd/yyyy"
    widgetVar="birthDate_var"
    id="birthDate"
    requiredMessage="birth date required"
    validatorMessage="invalid birth date "
    converterMessage="invalid birth date format"
    readonly="false"
    readonlyInput="false"
    navigator="true" 
    showOn="button" 
    value="#{testBean.parmMap['birthDate']}"                               
    size="10"                            
    maxlength="10"
    yearRange="c-120:c+0"  
    onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(1).show();$(this).mask('99/99/9999');return false;">
    <p:ajax event="dateSelect" listener="#{testBean.updateBirthDate}" process="@this" />                        
    <p:ajax event="change" listener="#{testBean.updateBirthDate}" process="@this" />  
</p:calendar> 

我怎样才能做到这一点?我正在使用 Mojarra 2.1.11 和 PrimeFaces 3.4.2。

【问题讨论】:

  • 当您说“清除输入”时,您的意思是使用退格键或清除按钮?
  • 您好。 - 我的意思是,如果使用出错,或者不打算输入,他们应该能够在输入上输入空格,或者“全选”和退格等......基本上只是清除文本从领域。我认为不需要“清除”按钮来删除用户手动输入的输入。这是否回答你的问题?感谢您的关注。 s

标签: jsf-2 primefaces


【解决方案1】:

我不知道这是否被认为是“黑客”或合法的解决方案,但是,我遇到的问题似乎是通过为日期输入创建自定义转换器来解决的......即,像这样......

更新:似乎不是一个有效的解决方案。虽然它似乎有效,但“calendar.validator”[?]

发出了一个类转换异常

即,

INFO: java.lang.ClassCastException: java.lang.String cannot be cast to java.util.Date
java.lang.ClassCastException: java.lang.String cannot be cast to java.util.Date
    at org.primefaces.component.calendar.Calendar.validate(Calendar.java:452)
    at javax.faces.component.UIInput.executeValidate(UIInput.java:1233)

对于小部件...

 <p:calendar
    pattern="MM/dd/yyyy"
    widgetVar="birthDate_var"
    id="birthDate"
    requiredMessage="birth date required"
    validatorMessage="invalid birth date "
    converter="dpConverter"
    converterMessage="invalid birth date format"
    readonly="false"
    readonlyInput="false"
    navigator="true"
    showOn="button"
    value="#{testBean.parmMap['birthDate']}"
    size="10"
    maxlength="10"
    yearRange="c-120:c+0"
    onfocus="$('#queryForm\\:msgs > div').hide();$('#queryForm\\:msgs > div').eq(1).show();$(this).mask('99/99/9999');return false;"
    onblur="$(this).unmask();return false;">
    <p:ajax event="dateSelect" update="@this" />
    <p:ajax event="change" update="@this"/>
</p:calendar>

使用了这个自定义转换器...

package aaa.bbb.ccc.war;

import java.text.SimpleDateFormat;
import java.util.Date;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

@FacesConverter("dpConverter")
public class DPConverter implements Converter
{

    private static SimpleDateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy");

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value)
    {
        try
        {
            if (null == value || String.valueOf(value).contains("__/__/____"))
            {
                return null;
            }
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }

        return value; //(null==value?null:value);
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value)
    {
        String v = null;
        try
        {
            if (String.valueOf(value).contains("__/__/____"))
            {
                return null;
            }

            if (value instanceof String)
            {
                v = (String) value;
            }
            else if (value instanceof Date)
            {
                v = dateFormat.format((Date) value);
            }
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
        return v;
    }
}   

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-11-02
    • 1970-01-01
    • 2022-01-06
    • 1970-01-01
    • 2012-06-17
    • 2018-02-02
    • 1970-01-01
    相关资源
    最近更新 更多