# <CalendarImage>

The CalendarImage tag renders as a push-button at run-time. When clicked, a calendar date-picker pops up to enable the user to select a date.

# Syntax

<CalendarImage
    AccessKey="string"
    AlternateText="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Overline="True|False"
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"
    Font-Strikeout="True|False"
    Font-Underline="True|False"
    ForeColor="color name|#dddddd"
    Format="date-formatting expression"
    Height="size"
    ImageUrl="url"
    Style="string"
    TabIndex="integer"
    Target="ID of control that will receive the selected date"
    ToolTip="string"
    Visible="True|False"
    Width="size"
  />  

# Remarks

• AccessKey: In browsers that support it, this property can be set to a character on the keyboard that can be used to set focus to the control. For instance, setting the value to F allows the user to access the control by pressing Alt+F on their keyboard (for Windows machines).

• AlternateText: Use this attribute's value will be used as the image's "alt" text. The "alt" text is generally used by screen reader software used by visually impaired users to identify the content of an image. It may also be used by search engines.

• BackColor: Color of the background of the control.

• BorderColor: Color of the border around the control.

• BorderStyle: Style of the border around the control.

• BorderWidth: Width of the border around the control, specified in units

• CssClass: Name of the Cascading Style Sheets (CSS) class used to style this control.

• Font Properties: A series of attributes such as font-bold, font-size, etc. that allow you to control how the text in the control is displayed. More

• ForeColor: Sets the foreground color (typically the color of the text) of the control.

• Format: If specified, this overrides the default date format used by the pop-up calendar. If left blank, the web server's default short date format will be used. An example format would be: format="yyyy-MM-dd" where yyyy returns the four digit year, MM returns a two-digit month, and dd returns a two-digit day. If you need the value to stay in that format, consider also using the <validate type="regex"> tag to validate the target control.

• Height: Height of the control, specified in units.

• Style: Same as the HTML style attribute. It allows you to apply CSS styling to the control (e.g. color: red; border: solid 1px black;).

• TabIndex: Sets the tab index for the control.

• Target: This is the ID of the control where the calendar's selected date will be sent. This should be a text box.

• ToolTip: In browsers that support it, sets the text to display when the mouse pointer hovers over the control.

• Visible: Determines if the control is visible (true) or hidden (false).

• Width: Width of the control in units.

# Example

<AddForm>  
  <SubmitCommand CommandText="INSERT INTO Users(FirstName, LastName) VALUES(@FirstName, @LastName)" />  
  <table>  
    <tr>  
      <td>  
        <Label For="txtEventDate" Text="Event Date" />  
        <TextBox Id="txtEventDate" DataField="EvtDate" DataType="datetime" />  
        <CalendarImage Text="Select Date" Target="txtEventDate" Format="yyyy-MM-dd" />
       </td>  
    </tr>  
    ...  
    <tr>  
      <td colspan="2">  
        <AddButton Text="Add" /> <CancelButton Text="Cancel" />  
      </td>  
    </tr>  
  </table>  
</AddForm>