jQuery DateTimePicker Setup

Home >Shield UI Documentation >DateTimePicker >JavaScript >jQuery DateTimePicker Setup

The DateTimePicker widget allows you to select a date including time part and perform an action. It renders a date input widget where the date string can be entered, calendar component that supports navigation and selection and listbox widget which allows choosing the time part.The underling elements from which the widget can be created is html input. In order to render the DateTimePicker 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 input element for which to initialize the DateTimePicker functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield DateTimePicker</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>

</head>
<body>

<input id="datetimepicker" ></input>

<script type="text/javascript">
    $(function () {
        $("#datetimepicker").shieldDateTimePicker({
            
        });
    });
</script>

</body>
</html>

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