Calendar Component

See Also | Tutorials

You can drag the Calendar component  from the Palette's Basic category to a page open in the Visual Designer to create an entry field with an integrated calendar pop-up to help the user pick dates for the field.

You can also drop the calendar on a container component, like a table cell or group box.

After dragging the component to the Visual Designer, you can do a number of things with it:

• Select the component and edit its properties in the Calendar Properties window. Some typical properties you might set are:
  • id. The name of the Calendar component. In the JSP file, this name is the value of the component's id attribute. In the page bean, this property's value is the name of the Calendar object.
     
    
  • columns. This property determines the width of the calendar's text field.
     
    
  • label. The text of the label displayed with the component, if any.
    • Note: The label property is not as flexible as the Label component. You can use the Label component if you want more control over the label's appearance, such as positioning of the label relative to the component.
    
     
    
  • minDate, maxDate. Specify the minimum and maximum dates that the user can set in the calendar. Default values are the current year and four years from the current year, for a total span of five years.
     
    
  • labelLevel. A number that affects the appearance of the label. 1 (Strong) is larger and bold. 2 (Medium), the default, is smaller and bold. 3 (Weak) is smaller and normal (not bold). This property takes effect only if the label property is set.
     
    
  • imageURL. Specifies an image file to be displayed with the calendar.
     
    
  
   
  
• Right-click the component and choose one of the following pop-up menu items:
  • Edit Event Handler. Write code for one of the following event handlers.
    • validate. Opens the Java Editor with the cursor positioned in the component's validate method so you can insert code to validate the value of the component.
       
      
    • processValueChange. Opens the Java Editor with the cursor positioned in the component's processValueChange method so you can insert code that executes when the value of this component changes (for example, the user changes the value of another component that is controlling the value of this component).
       
      
    
     
    
  • Set Initial Focus. Gives this component focus when the user opens the page.
     
    
  • Auto-submit on Change. Causes the form to be automatically submitted if the value of the component changes. Sets the component's JavaScript onclick property to common_timeoutSubmitForm(this.form, 'component-id');. At runtime, this code causes the form to be automatically submitted if the user changes the component value. Once the form is submitted, conversion and validation occur on the server and any value change listener methods execute, and then the page is redisplayed.
     
    A component configured to Auto-submit on Change can use virtual forms to limit the input fields that are processed when the form is submitted. If the auto-submit component is defined to submit a virtual form, only the participants in that virtual form will be processed when the auto-submit occurs.
     
    
  • Bind to Data. Opens a dialog box that enables you bind the selectedDate property to an object or to a data provider, so you can evaluate the date that the user chose after the page is submitted. For more information on using this dialog box, see Bind to Data Dialog Box.
     
    
  • Property Bindings. Opens a dialog box that enables you to bind properties of the component in addition to the selectedDate property to other objects or bean properties that can update this component's properties automatically.
     
    
  • Configure Virtual Forms. Enables you to add the component to a virtual form.
     
    
  • Align. If you have multiple components selected, you can determine how they align with one another. If only the current component is selected, you can choose whether the component aligns with (snaps to) the background grid when you move it around.
     
    
  • Preview in Browser. See how the page renders in the default web browser for your system.
     
    
  
   
  

See Also

Binding Component Properties

Working With Components

Component Tasks: Quick Reference

Component Web Tutorials

Data Source Web Tutorials

About the Palette

Tutorials

Delving Into Components Tutorial

Using Virtual Forms