Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
manu123manu123 

Date field masked as '99/99/9999

I have date field on VisualForce page, which uses Calendar.js to Pick a Date.
When user types the date, then date should be masked as '99/99/9999'.
'/' should be auto-populated when user is typing in the date value.
 
Andy BoettcherAndy Boettcher
Can you post your code so we can see exactly what you're trying to do?  Please remember to use the code formatter button "< >" in the editor here.
manu123manu123
<apex:page id="pg" controller="controllerNew"> 

<apex:form ID="Date">
 <apex:pageBlock title="" > 
<apex:pageBlockSection title="Date" columns="2"> 
<apex:inputField required="true" label="Date:" value="{!cus.Date__c}"/> 
</apex:pageBlockSection> </apex:pageBlock> 
<apex:commandbutton value="Submit" action="{!saveDate}"/> 
</apex:form> 
</apex:page>

This is my VF. I followed the link 
http://th3silverlining.com/2010/01/08/masking-field-values-on-visualforce-input/#comments

But no luck, information from the link did not work
 
Andy BoettcherAndy Boettcher
We can't help you with code unless you show us all of your code - what you tried with jQuery masking and all that.  There is no jQuery in your code snip above.  =)
manu123manu123
<apex:page>
<apex:includeScript value="{!$Resource.jquery132min}"/>
<apex:includeScript value="{!$Resource.jquerymaskedinput}"/>

<apex:form >
 
<!-- I've attached the jQuery to the fields using classes.
This avoids the awkward issue of dealing with SF generated
ids. The performance impact should be negligiable as long as
your page is not massive. -->
 
<apex:outputLabel for="tel" value="Telephone"/>
<apex:inputText id="tel" styleClass="tel-mask"/>
 
<apex:outputLabel for="dbl" value="Double" />
<apex:inputText id="dbl" styleClass="dbl-mask" onclick="readyfunction()"/>
 
<apex:outputLabel for="date" value="Date" />
<apex:inputText id="date-mask" styleClass="date-mask" />
</apex:form>
<script>
$(document).ready(function() {
// Attach masks to correct input fields
$(".tel-mask").mask("(999) 999-9999");
$(".dbl-mask").mask("999 999 999.99");
$(".date-mask").mask("99/99/9999");

});
</script>
</apex:page>

This is what i tried, this VF is exact copy of the VF from the link.
I have update JS as Static Resources are set as Public.
Andy BoettcherAndy Boettcher
Did you look at the Javascript Console for errors and Element Navigator in your browser to verify if the ids on the inputfield are being rendered properly?  VF has a tendency to prepend your id="" attribute with a bunch of stuff that would not allow the jQuery binding to do so.

 
manu123manu123
I did debugging on Javascript console "jQuery is not defined" i see this exception for
jquerymaskedinput JS.
 
Adílio Santos | Devry BrasilAdílio Santos | Devry Brasil
I have the same problem. Any solution?
Adílio Santos | Devry BrasilAdílio Santos | Devry Brasil

Resolved!  \o/ @manu123

Keep fit and add the following code above the line 21:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>