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

Auto Open on Focus

8 Answers 1433 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 21 May 2012, 09:42 PM
I'm trying to get my datepicker to open when the field has focus.  This is relatively easy to do, but now when you click the calendar next to the field to open it up manually, it closes!  Any ideas?  Script below:

http://jsfiddle.net/VgcL7/ 

8 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 23 May 2012, 12:43 PM
Hello Gary,

 
You can achieve your goal using the latest official release of KendoUI.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gary
Top achievements
Rank 1
answered on 24 May 2012, 03:39 PM
I updated my jsfiddle to use the latest version http://jsfiddle.net/VgcL7/6/ 

This did not fix the issue (jsFiddle isn't loading some of the css for some reason, but you can still see the issue).  If the field doesn't already have focus and you click on the select button, the datepicker opens and closes.
0
Accepted
Georgi Krustev
Telerik team
answered on 25 May 2012, 12:46 PM
Hello Gary,

 
I was able to observe the issue. In order to achieve your goal you will need to override the click event of the toggle button:

$(document).ready(function() {
    kendo.ui.DatePicker.prototype._click = function() {
        var that = this,
            element = that.element;
 
        that.dateView.toggle();
  
        if (element[0] !== document.activeElement) {
            element.focus();
        }            
    }
         
    $(".ctlDatePicker").kendoDatePicker();
 
    $(".ctlDatePicker").bind("focus", function() {
        $(this).data("kendoDatePicker").open();
    });
});​
The fix will be included in the next internal build. Please note that the internal builds are available only to paid customers.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gary
Top achievements
Rank 1
answered on 25 May 2012, 03:08 PM
Thanks - works great!
0
Cosmin
Top achievements
Rank 1
answered on 06 Nov 2014, 07:38 AM
Much easier is to just use the open and close event of the datepicker.
01.$('#id').kendoDatePicker({
02.    open: function(e) {
03.        $('#id').data('kendoDatePicker').options.opened = true;
04.    },
05.    close: function(e){
06.        $('#id').data('kendoDatePicker').options.opened = false;
07.    }
08.});
09.$('#id').focus(function(e){
10.    var obj = $(this).data('kendoDatePicker');
11.    if (typeof(obj.options.opened) == 'undefined' || !obj.options.opened){
12.        obj.open();
13.    }
14.})
0
Augusto
Top achievements
Rank 2
answered on 11 Dec 2015, 01:28 PM
I'm using Kendo UI + Angular. The datepicker is not opening on focus. Do I have to setup something else? Is there an option to auto open on focus? Thanks
0
Dimiter Topalov
Telerik team
answered on 11 Dec 2015, 02:39 PM
Hi Augusto,

The Kendo UI DatePicker doesn't expose a focus event for its input element, but you can use a standard ng-focus attribute to achieve the desired behavior.

<input kendo-date-picker="myPicker" ng-focus="openPicker()" />
$scope.openPicker = function() {
  $scope.myPicker.open();
}



Hope this helps.

Regards,
Dimiter Topalov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Augusto
Top achievements
Rank 2
answered on 11 Dec 2015, 04:13 PM

Nice! I'm starting to get the idea about how to use Kendo with Angular. Following your suggestion, I ended up using something like:

ng-click="myPicker.open()".

 It was actually pretty simple! :) Thanks for your help!

Tags
Date/Time Pickers
Asked by
Gary
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Gary
Top achievements
Rank 1
Cosmin
Top achievements
Rank 1
Augusto
Top achievements
Rank 2
Dimiter Topalov
Telerik team
Share this question
or