+ Start a Discussion
SRILAKSHMI BSRILAKSHMI B 

Datepicker functionality for the portal visualforce page date input field.

Hi All,

 

I am creating Visualforce page for customer portal.I want to create a date input field for which user should be able to pick the date from the calendar pop up.

 

 

Can anyone please suggest or provide code sample to acheive this.

 

 

Thanks,

Srilakshmi

Best Answer chosen by Admin (Salesforce Developers) 
Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference.

=======vf=========

<apex:page controller="DatePickerDEmo2">

<apex:form id="myForm">

<script>

                       function DynamicDatePicker(d_id)

                       {

                       

                         DatePicker.pickDate(false,d_id.id,false);

                       }

</script>

<table>

<tr><td>DatePicker From JavaScript</td><td><apex:inputText value="{!d_date_str}" id="t" onfocus="DynamicDatePicker(this);" onchange="checkDateFormatt(this.id);" size="20" disabled="false" style="width:150px;"/></td></tr>

<tr><td>DatePicker From Input Field</td><td><apex:inputField value="{!c.Birthdate}"/></td></tr>

</table>

</apex:form>

</apex:page>

 

========Apex Controller=========

 

public class DatePickerDEmo2 {

 

    public String d_date_str{get;set;}

    public Contact c{get;set;}

    public DatePickerDEmo2()

    {

        c=new Contact();

    }

}

 

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

All Answers

Navatar_DbSupNavatar_DbSup

Hi,

 

Try the below code snippet as reference.

=======vf=========

<apex:page controller="DatePickerDEmo2">

<apex:form id="myForm">

<script>

                       function DynamicDatePicker(d_id)

                       {

                       

                         DatePicker.pickDate(false,d_id.id,false);

                       }

</script>

<table>

<tr><td>DatePicker From JavaScript</td><td><apex:inputText value="{!d_date_str}" id="t" onfocus="DynamicDatePicker(this);" onchange="checkDateFormatt(this.id);" size="20" disabled="false" style="width:150px;"/></td></tr>

<tr><td>DatePicker From Input Field</td><td><apex:inputField value="{!c.Birthdate}"/></td></tr>

</table>

</apex:form>

</apex:page>

 

========Apex Controller=========

 

public class DatePickerDEmo2 {

 

    public String d_date_str{get;set;}

    public Contact c{get;set;}

    public DatePickerDEmo2()

    {

        c=new Contact();

    }

}

 

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

This was selected as the best answer
SRILAKSHMI BSRILAKSHMI B

Thank you it worked.