Customization

11 Mar 20162 minutes to read

EJWEB DatePicker appearance can be customized using below listed properties.

Set Dimension

By default EJWEB DatePicker has standard height and width (Height: “30px” and Width: “143px”). You can change this height and width by using Height and Width property respectively.

  • HTML
    • <ej:DatePicker ID="datepick" Height="50px" Width="300px" runat="server"></ej:DatePicker>

    Since EJWEB DatePicker is a form control and you can make it as responsive by specifying its Width as “100%”.

  • HTML
    • <ej:DatePicker ID="datepick" Width="100%" runat="server"></ej:DatePicker>

    You can show or hide the footer of EJWEB DatePicker calendar by using ShowFooter property.

  • HTML
    • <ej:DatePicker ID="datepick" ShowFooter="false" runat="server"></ej:DatePicker>

    NOTE

    Footer contains the today button to quickly navigate to the current date. By turning off it, you have to select current date by manually.

    Show Popup Button

    EJWEB DatePicker control, contains a button to open the DatePicker calendar. You can hide this DatePicker calendar button using ShowPopupButton value as false.

    By hiding this button, you can open the DatePicker by focusing the input textbox element of EJWEB Datepicker control itself.

  • HTML
    • <ej:DatePicker ID="datepick" ShowPopupButton="false" runat="server"></ej:DatePicker>

    Show Other Months

    You can show or hide the other month days from EJWEB DatePicker calendar by using ShowOtherMonths property.

  • HTML
    • <ej:DatePicker ID="datepick" ShowOtherMonths="false" runat="server"></ej:DatePicker>

    Highlight Special Date

    EJWEB DatePicker allows you to highlight the special dates in DatePicker calendar by using SpecialDates property. It receives the array of JSON data, in which the data should contain the date value, icon CSS class and tooltip as field values with any names.

  • HTML
    • <ej:DatePicker ID="datepick" runat="server">
             <ej:SpecialDate Date="specialdate" IconClass="customCss" Tooltip="toolTip" />
    </ej:DatePicker>

    And you can map those above field names to EJWEB DatePicker by using Fields property, which holds following members.

    Members Description
    Date

    		 It specifies the mapping field of special date
    IconClass

    		 It specifies the mapping field of icon CSS class.
    Tooltip

    		 It specifies the mapping field of tool tip text.