Datepicker in KendoUI Mobile

8 posts, 1 answers
  1. Answer
    Martin
    Martin avatar
    17 posts
    Member since:
    Apr 2009

    Posted 31 May 2013 Link to this post

    Hi,
    I know that currently you do not have a datepicker in KendoUI mobile.

    Firstly, is this a planned release at some point in the near future?

    Secondly, I am attempting to use the KendoUI Web datepicker as an alternative inside a mobile application. However when I include both the kendoUI style sheet and the mobile one they massively conflict, causing the datepicker to be un-useable.

    Can someone advise how I can use the datepicker inside a webapp for KendoMobile? I have also tried just the standard Jquery datepicker but the same happens, the kendoUI Mobile style sheet causes it to look really bad.

    I have attached a screen shot to show what I mean.

    Here is some sample code:

    <div id="datePicker" style="width: 95%; height: 10em;" data-role="modalview">
       <div data-role="header">
          <div data-role="navbar">
          <span>Choose a date</span>
           <a data-click="closeModalView" data-role="button" data-align="right">Cancel</a>
          </div>
         </div>
         <div style="text-align: center;">
         <!-- Date picker goes here -->
         <p>Date: <input type="text" id="date1" /></p>
         </div>
       </div>
     
       <script>
           function dateChooseClick(e) {
               $("#datePicker").kendoMobileModalView("open");
               $("#date1").kendoDatePicker();
           }
           function closeModalView() {
               $("#datePicker").kendoMobileModalView("close");
           }
       </script>


    Thanks
    Martin
  2. KSBA Techie
    KSBA Techie avatar
    27 posts
    Member since:
    Aug 2012

    Posted 01 Jun 2013 Link to this post

    For my mobile app in IOS I use it's native date picker by setting the input type to date.

    On andriod I'm using the MobiScroll datepicker found here: https://code.google.com/p/mobiscroll/ 
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 04 Jun 2013 Link to this post

    Hello Martin,

    I am afraid that providing a date/datetime mobile picker widgets is not in our immediate plans.

    Generally speaking you should be able to use the web DatePicker in a mobile application. I tried to reproduce the behaviour that you encountered in a sample page but to no avail. Could you please check my sample and let me know what I am missing?

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Martin
    Martin avatar
    17 posts
    Member since:
    Apr 2009

    Posted 04 Jun 2013 Link to this post

    Hi Alexander,
    Thanks for the reply.
    From further investigation the kendoUI datepicker for mobile DOES work as a native widget (pops up a date picker) in most newer devices.

    The device I was testing on was using a very old version of the native android browser. However on all our newer devices it seems to work fine.

    Thanks, I have marked this thread as answered!

    Martin
  6. Produccion Softpymes
    Produccion Softpymes avatar
    1 posts
    Member since:
    Jun 2013

    Posted 13 Feb 2014 in reply to KSBA Techie Link to this post

    Have an alternative? Mobiscroll already pay.
  7. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 23 Mar in reply to Alexander Valchev Link to this post

    Hi Alexander,

    The problem I have with the Kendo DatePicker on mobile, is:

    1. Keyboard - it opens a keyboard, when I feel it shouldn't, and it opens the wrong keyboard.  It probably should be a numeric keyboard if anything.
    2. Bad UX - when the keyboard opens, it sits on top of the calendar and you can't move the calendar to a date later in the month without it closing on you

    It would be much better if the keyboard didn't open on mobile.

    Do you have any suggestions for this?

    Thanks,

    King Wilder

  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Mar Link to this post

    Hi King,

    The behaviour that you expect may be achieved if you use a standard `<input type="date" />`

    We did our best to adapt the DatePicker for mobile but we cannot resolve the issues that you listed because the widget is not designed with a special mobile mode. The keyboard pops up because widget's input is focused. This behaviour makes sense in desktop applications. The wrong keyboard pops up because the DatePicker input is of "text" type. This is required in order to support localization and custom formats.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 25 Mar in reply to Alexander Valchev Link to this post

    Hi Alexander,

    Unfortunately, the '<input type="date" />' doesn't work on all browsers.  

    But I did find a little work around that allows me to use the Kendo DatePicker on mobile and NOT open the keyboard.  By detecting for mobile, and then setting the datepicker HTML input to "readonly", it will not open the mobile keyboard and the calendar is in full view.  While for desktop browsers, it will work as normally expected.

     

    if (isMobile()) {
        $("#PayDate").prop("readonly", true);
    }
     
    function isMobile() {
        return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent || navigator.vendor || window.opera) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent || navigator.vendor || window.opera).substr(0, 4)))
    }

Back to Top
Kendo UI is VS 2017 Ready