Datepicker in KendoUI Mobile

[Martin]

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

[KSBA Techie]

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/ 

[Alexander Valchev]

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?

• http://jsbin.com/okadeh/2/edit
  
  

Regards,
Alexander Valchev
Telerik

[Martin]

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

[Produccion Softpymes]

Have an alternative? Mobiscroll already pay.

[King Wilder]

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

[Alexander Valchev]

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

 

 

[King Wilder]

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)))
}