jQuery Datepicker

Today we will look at the ShieldUI jQuery Datepicker widget, which allows easy selection of dates over a standard input field. It incorporates the ShieldUI Calendar to allow easy navigation over standard dates, or more reduced views of months or years. There are three widgets in this group, namely - the standard datepicker control, as well as month/year picker and datetime picker widgets.

Getting started

The underling elements from which the widget can be created is html input. In order to render the DatePicker JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an div or span element for which to initialize the DatePicker functionality.
3. Initialize the widget.

<!DOCTYPE html>
<title>Shield DatePicker</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>


<input id="datepicker" />

<script type="text/javascript">
    $(function () {


To see an example of the control in action, along with all the required code, please refer to the following example.

Options and features

The ShieldUI jQuery datepicker widgets aim for intuitive setup and easy integration into any web development scenario. To achieve this, the control has two important design features.
First, it has an optimal set of API options, which keeps the focus on reduced syntax, without getting in the way of functionality.
The second one is the customization options, which allow totally altering the way the component looks - whether it is a simple color variation change, or restyling the whole widget. As with each ShieldUI widget, the picker components come with a rich set of predefined style presets, or themes. There are a total of 16 themes, which aim to cover some of the most common visual scenarios and palettes. However, in case some of them does not meet your requirements fully, each theme is fully customizable. One can easily override the built-in .css classes of the widgets, and include custom ones.
To facilitate date navigation, each picker input has a popup calendar. This calendar can be either a standard one, or a view of months or years. This depends on the exact type of picker initialized on the page.
For improved visual effects, the navigation has built-in animation effects, which makes transitions between views smooth and pleasant to the eye.
In addition to its flexible API, the picker components expose client-side events, which track user interactions and allow further custom actions. You can see the available events in the standard picker widget here.

This outlines some of the features in the ShieldUI datepicker controls. To see them in action, or explore more of our controls, please refer to our online demos.