Theming and Customization jQuery Date Picker Control

The igDatePicker allows you to have an input field with a dropdown calendar and a specified date format display. The igDatePicker control supports localization by recognizing different regional options exposed from the browser and also supports validation.

The igDatePicker control extends the functionality of the igDateEditor control and requires the jQuery UI Datepicker script to be included in the page (jquery.ui.datepicker.js).

The Ignite UI  DatePicker control depends on jquery.datepicker an thus also requires its localization files to be referenced on the page. The Infragistics Date Picker reuses the drop-down calendar from jquery.datepicker as it doesn’t implement its own drop-down.

• Prerequisites: 

You need to add these resources to use Ignite UI Date Picker with styling

<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

You can create an instance of igDatePicker using the code below:

$(function () {

            $("#datePicker").igDatePicker();

});

The igDatePicker control exposes a rich client-side API, which may be configured the work with any server technology. While the IgniteUI controls are server-agnostic, the editor control does feature wrappers specific for the Microsoft ASP.NET MVC Framework to configure the control with the .NET language of your choice.

The Date Picker control may be extensively styled giving you an opportunity to provide a completely different look and feel for the control as opposed to the default style. Styling options include using your own styles as well as styles from jQuery UI’s ThemeRoller.

This blog is focused mainly about how to style igDatePicker , how to change the visualization  of some  the most popular Date Picker parts  and more useful examples.

As it was mentioned above, the igDatePicker control is a jQuery-based widget that extends the igDateEditor control and it exposes a number of options for styling. To customize style of the numeric editor you must use theme option to apply custom CSS rules to the control. Ignte UI DatePicker control reuses the drop-down calendar from jquery.datepicker and you should use style options available for jquery.datepicker.

• Theming

Infragistics offers the following themes you can include:

• Infragistics Theme
• Infragistics 2012 Theme
• Metro Theme
• iOS Theme
• Bootstrap Themes:
  • Default
  • Superhero
  • Yeti
  • Flatly

The Ignite UI DatePickers offers full theming support. That means almost all its elements could be restyled using theming.

More info around theming for Ignite UI  is described in this post.

The following code snippet includes the Infragistics theme and structure files in your file:

In HTML:

<link href="{IG Resources root}/css/themes/infragistics/infragistics.theme.css" 
     rel="stylesheet" type="text/css" />
<link href="{IG Resources root}/css/structure/infragistics.css" 
     rel="stylesheet" type="text/css" />

For loading the resources with the Loader, use the following code to include the igLoader script in the page:

If you are using Infragistics loader you need to set cssPath and scriptPath options, which is relative to the page that instantiates the loader.

<script type="text/javascript">
    $.ig.loader({
        scriptPath: "/Scripts/ig/",
        cssPath: "/Content/ig/",
        resources: "igEditors"
    });
</script>

If you need to use predefined themes you need to add also the specified theme:

<script type="text/javascript">
    $.ig.loader({
        scriptPath: "/Scripts/ig/",
        cssPath: "/Content/ig/",
        resources: "igEditors",
	theme: "metro"
    });
</script>

The styled Date Picker is shown below:

Changing theme is not supported when base element is INPUT or TEXTAREA and renderInContainer or button are not enabled.

//Initialize
$(".selector").igDateEditor({
    theme : "redmond"
});
 
//Get
var theme = $(".selector").igDateEditor("option", "theme");
 
//Set
$(".selector").igDateEditor("option", "theme", "redmond");

• Changing the Theme Programmatically

The code below is an example how to set a custom theme named, customTheme, when the mouse hovers over the control.

<style type="text/css">
    .customTheme .ui-igedit-hover
    { 
        background: #f0ffff; 
        border-color:#a0a0a0; 
    }

    .customTheme .ui-igedit-fieldincontainer
    { 
        height:18px; 
        float:left; 
        padding-top:0px; 
        padding-bottom:0px; 
        margin:0px; 
        color:#1CC2FF;
    }
</style>
<body>
     <input type="text"  id="datepicker"  />
</body>

You can use the approach  shown below to change the theme during initialization:

$('#datepicker').igDatePicker({
     width: 160,
     regional: 'en-US', 
        theme: 'customTheme'
});

The result is shown below:

If the control is already created in the DOM, then you can change the theme at any time using the approach shown:

//use this approach
//when the control is already created in the DOM
$('#datepicker').igDatePicker('option', 'theme', 'customTheme');

• Using ThemeRoller

The igDatePicker control can also be fully styled using the jQuery UI ThemeRoller. The next snippet demonstrates how to change the theme of a control from a Theme Switcher dropdown.

Set picker theme with jQuery UI ThemeRoller via HTML

<body>
     <input type="text"  id="datepicker"  />
     <div id="themeRoller" />
</body>

In JavaScript - Initialize igDatePicker:

$('#datepicker').igDatePicker({
    width: 160,
    regional: 'en-US'
});
$('#themeRoller').themeswitcher();

Click on this image to get a fully supported trial version of Infragistics Ignite UI controls:

Ignite UI