How to show calender and date picks in input text and need to save in field in visual force page like as shown in below image. can anybody help me on this.
[SalesForce] how to view calendar in visual force page
Related Solutions
The word "popup" generally means a page opening in new window in front of the current window (see e.g. the Mozilla explanation). It sounds like you want a "modal" instead. You can find a few examples here.
If you are after a modal, Jason "tehnerd" Venable writes a good explanation of how you can create one in Visualforce.
The VF page:
<apex:page controller="popup">
<apex:form >
<apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
<apex:pageBlock >
Lorem ipsum ..... dummy stuff to show the popup is above content
</apex:pageBlock>
<apex:outputPanel id="popup">
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
<iframe src="http://example.com/myvisualforcepage"></iframe>
<apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
<style type="text/css">
.customPopup{
background-color: white;
border-style: solid;
border-width: 2px;
left: 50%;
padding:10px;
position: absolute;
z-index: 9999;
/* These are the 3 css properties you will need to tweak so the pop
up displays in the center of the screen. First set the width. Then set
margin-left to negative half of what the width is. You can also add
the height property for a fixed size pop up.*/
width: 500px;
margin-left: -250px;
top:100px;
}
</style>
</apex:page>
The controller:
public class popup {
public boolean displayPopup {get; set;}
public void closePopup() {
displayPopup = false;
}
public void showPopup() {
displayPopup = true;
}
}
If you are binding to a rich text field on an object, you can instead use
<apex:inputField value="{!your.FieldName}"/>
This will give you access to the Salesforce rich text editor, and allow image uploads inline with text.
Best Answer
You can use jQuery datepicker to show the calendar in a vf page. Please find the below example on how to implement jQuery datepicker and pass the value from VF page to controller. Hope this helps.
VF Page
Controller
Screen-1
Screen-2