function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
suresh nayak 12suresh nayak 12 

custom calendar

How to create a custom calendar in visualforce page.As i am a newbie please help me.
Best Answer chosen by suresh nayak 12
NagendraNagendra (Salesforce Developers) 
Hi Suresh,

Please find the below code: 
Visualforce page:

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Apex Controller:

public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}
Desired Output:
User-added image
Kindly mark it as solved if it helps.

Best Regards,
Nagendra.P


 

All Answers

Ajinkya1225Ajinkya1225
Hi Suresh,
Here are the snippets:

Method 1: Using html-5 (Looks B-E-A-utiful !!!)
vf page: 
<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
class; 
public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}

Method 2: Using input field tag
  
<apex:page standardcontroller=’Account’>
    <apex:form>
        <apex:inputfield value=”{!Account.DateTypeField}”
    </apex:form>
</apex:page>

Method 3: Adding CSS 
<apex:page standardcontroller=’Account’ id=”mypage”>
    <apex:form id=”myform”>
        <apex:inputText styleClass="cssbody" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'myPage:myForm:demo', false);" />
   </apex:form>
</apex:page>

Please upvote and mark this answer as solved, if it helped you.
Cheers!
Ajinkya Deshmukh

 
NagendraNagendra (Salesforce Developers) 
Hi Suresh,

Please find the below code: 
Visualforce page:

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Apex Controller:

public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}
Desired Output:
User-added image
Kindly mark it as solved if it helps.

Best Regards,
Nagendra.P


 
This was selected as the best answer
suresh nayak 12suresh nayak 12
Hi Nagendra.P,Ajnkya

Thank u so much for your suport and its working absolutly fine.

Thanks,
suresh.