Create a Popup Calendar

To create a popup calendar use the following code:

<script id="scriptInit" type="text/javascript">
            $(document).ready(function () {
                $("#calendar").wijcalendar({
                    popupMode: true,
                    selectedDatesChanged: function () {
                        var selDate = $(this).wijcalendar("getSelectedDate");
                        if (!!selDate) $("#popdate").val(selDate.toDateString());
                    }
                });
                $("#popdate").click(function () {
                    $("#calendar").wijcalendar("popup", {
                        of: $("#popdate"),
                        offset: '0 2'
                    });
                })
        });
      </script>
<h2>Popup</h2>
<div class="main demo">
      <!-- Begin demo markup -->
      <div id="calendar">
      </div>
      <label for="popdate">Choose a Date:</label>
      <input name="popdate" type="text" id="popdate" style="width: 180px;" />
      <!-- End demo markup -->
      <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
      </div>
</div>

This topic illustrates the following:

When you click inside the textbox a popup calendar appears below the textbox.