Auto Open on Focus

9 posts, 1 answers
  1. Gary
    Gary avatar
    18 posts
    Member since:
    Jun 2012

    Posted 21 May 2012 Link to this post

    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/ 
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 May 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Gary
    Gary avatar
    18 posts
    Member since:
    Jun 2012

    Posted 24 May 2012 Link to this post

    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.
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 25 May 2012 Link to this post

    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!
  6. Gary
    Gary avatar
    18 posts
    Member since:
    Jun 2012

    Posted 25 May 2012 Link to this post

    Thanks - works great!
  7. Cosmin
    Cosmin avatar
    1 posts
    Member since:
    Jul 2014

    Posted 06 Nov 2014 in reply to Gary Link to this post

    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.})
  8. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 11 Dec 2015 Link to this post

    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
  9. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 11 Dec 2015 Link to this post

    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!
     
  10. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 11 Dec 2015 in reply to Dimiter Topalov Link to this post

    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!

Back to Top
Kendo UI is VS 2017 Ready