ui.igDatePicker

ui.igDatePicker_image

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). For more details on the igDatePicker control’s API, refer to the igDateEditor and igEditor control’s API documentation. For more information on customizing the jQuery UI Datepicker, see the jQuery UI online documentation. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igDatePicker control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igDatePicker control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
        <title>Ignite UI igDatePicker</title>
        <!-- Infragistics Combined CSS -->
        <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
        <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
        <!-- jQuery Core -->
        <script src="js/jquery.js" type="text/javascript"></script>
        <!-- jQuery UI -->
        <script src="js/jquery-ui.js" type="text/javascript"></script>
        <!-- Infragistics Combined Scripts -->
        <script src="js/infragistics.core.js" type="text/javascript"></script>
        <script src="js/infragistics.lob.js" type="text/javascript"></script>
        <script type="text/javascript">
                $(function () {
                        $("#datePicker").igDatePicker({
                                width: 280,
                                dateInputFormat: "dateTime",
                                regional: "en-US",
                                placeHolder: "Pick Date",
                                datepickerOptions: {
                                        showWeek: true
                                }
                        });
                });
        </script>
</head>
<body>
        <input id="datePicker" />
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui-1.9.0.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.scroll.js
infragistics.ui.validator.js

Inherits

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.