This is a migrated thread and some comments may be shown as answers.

DatePicker calendar location problem

1 Answer 186 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 28 Nov 2012, 12:45 AM
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>
  

1 Answer, 1 is accepted

Sort by
0
Wael
Top achievements
Rank 1
answered on 08 Jan 2013, 03:10 PM
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>
Tags
Date/Time Pickers
Asked by
Tim
Top achievements
Rank 1
Answers by
Wael
Top achievements
Rank 1
Share this question
or