DatePicker calendar location problem

[Tim]

I'm trying to get a couple of 'From', 'To' datepickers to open automatically on focus. I've got it working fine, apart from the fact that the calendar opens above the inputs - which looks weird. 

How do I get it to open below them, as per convention?

$(".dp").bind("focus", function() {

        $(this).data("kendoDatePicker").open();

});

<div id="datePickers" class="k-group">

    <label>Date Range</label>

    @(Html.Kendo().DatePicker()

        .Name("From")

        .Min(new DateTime(2012, 01, 01))

        .Max(new DateTime(2020, 12, 31))

        .Value(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1))

        .HtmlAttributes(new { @class = "dp" })

    )

    @(Html.Kendo().DatePicker()

        .Name("To")

        .Min(new DateTime(2012, 01, 01))

        .Max(new DateTime(2020, 12, 31))

        .Value(DateTime.Today)

        .HtmlAttributes(new { @class = "dp" })

    )

     

    <button class="k-button" id="search">Search</button>

</div>

  

[Wael]

Hey

This should make it work :-)

<div id="datePicker" class="k-content">
    <label>Date Range</label>
    @(Html.Kendo().DatePicker()
        .Name("from")
        .Min(new DateTime(2012, 01, 01))
        .Max(new DateTime(2020, 12, 31))
        .Value(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1))
        .HtmlAttributes(new { @class = "dp" })
    )
    @(Html.Kendo().DatePicker()
        .Name("To")
        .Min(new DateTime(2012, 01, 01))
        .Max(new DateTime(2020, 12, 31))
        .Value(DateTime.Today)
        .HtmlAttributes(new { @class = "dp" })
    )
     
    <button class="k-button" id="search">Search</button>
</div>
<script >
    $(".dp").bind("focus", function () {
        $(this).data("kendoDatePicker").open();
    });
</script>