Getting Started with the Popup
This guide demonstrates how to get up and running with the Kendo UI for jQuery Popup.
After the completion of this guide, you will be able to achieve the following end result:
<input id="datepicker" data-role="datepicker" />
<div id="popup" style="width: 100px; padding: 10px;">This is a Kendo Popup for your DatePicker</div>
<script>
$("#datepicker").kendoDatePicker();
$("#popup").kendoPopup({
anchor: $("#datepicker"),
}).data("kendoPopup").open();
</script>
1. Create a Div Element
First, create a <div> element which will serve to initialize the Popup. The content of the div will also serve as content for the Popup.
<div id="popup" style="width: 100px; padding: 10px;">This is a Kendo Popup for your DatePicker</div>
2. Add an Anchor Component
You will also need an element that will serve as an anchor for the Popup. For the purposes of this guide, you will define a Kendo DatePicker.
<input id="datepicker" data-role="datepicker" />
<div id="popup" style="width: 100px; padding: 10px;">This is a Kendo Popup for your DatePicker</div>
<script>
$("#datepicker").kendoDatePicker();
</script>
3. Initialize the Popup
In this step, you will initialize the Popup from the <div> element. All settings of the Popup will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript. You need to specify the anchor option so that the Popup appears next to it.
<input id="datepicker" data-role="datepicker" />
<div id="popup" style="width: 100px; padding: 10px;">This is a Kendo Popup for your DatePicker</div>
<script>
$("#datepicker").kendoDatePicker();
$("#popup").kendoPopup({
anchor: $("#datepicker"),
}).data("kendoPopup").open();
</script>