Override the custom hint message of af:inputDate

This blog we will see how to override the custom message of af:inputdate component.

Generally when user will click inside the af:inputDate component then the default hint message will display like the below screen.

Add the below code for override the default message.
<af:inputDate label="Label 1" id="id1">
      <af:convertDateTime hintDate="Add custom message" type="date"/>
</af:inputDate>
Now you run your page and the screen will looks like the below

Thanks...

Disable af:inputDate Default Message

This blog we will see how to hide the default message of af:inputdate component.
Generally when user will click inside the af:inputDate component then the default hint message will display like the below screen.

Now we will how we will hide this default message. Add the below java script inside the fragment.
<af:resource type="javascript">
    function hideDefaultMsg(event){
        var src = event.getSource();
        src.getPeer().ShouldShowHint =function(){
            return false;   
        }
    }
</af:resource>
After that you can add the af:clientListener inside the af:inputDate component like the below code
<af:inputDate label="Label 1" id="id1" >
    <af:clientListener method="hideDefaultMsg" type="focus"/>
</af:inputDate>
Now you run your page and the default message will not display like the below screen

Thanks...

af:inputDate disabling the input through keyboard

The below code will use to disabling the keyboard input on af:inputDate

<f:view>

        <af:document title="PanelBoxDemo.jspx" id="d1" binding="#{backingBeanScope.backing_PanelBoxDemo.d1}">

        <af:resource type="javascript">

       function disableDatePicker(evt){

        evt.cancel();

       }

     </af:resource>

            <af:form id="f1" binding="#{backingBeanScope.backing_PanelBoxDemo.f1}">

                <af:inputDate label="Label 1" id="id1" binding="#{backingBeanScope.backing_PanelBoxDemo.id1}">

                    <af:clientListener method="disableDatePicker" type="keyDown"/>

                </af:inputDate>

            </af:form>

        </af:document>

    </f:view>

Thanks..