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

Native Datepickers

16 Answers 341 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Chris
Top achievements
Rank 1
Chris asked on 06 Nov 2012, 10:47 PM
I am looking to include a datepicker in my app that looks native to IOS and Android but I cannot find any documentation on how to accomplish that. Can you please point me to some sample code?

I see in the demos that there is a datepicker in Kendo UI Web. Can that be used in my mobile app? If so, what needs to be done to include that widget.

Thanks.

16 Answers, 1 is accepted

Sort by
0
Jan-Dirk
Top achievements
Rank 1
answered on 07 Nov 2012, 09:58 AM
You can do that by, for example, starting a new project and select Kendo UI Mobile for your app.

Here is a nice tutorial for those that are new to KendoUI: http://docs.kendoui.com/tutorials/build-apps-with-kendo-ui-mobile#next%20steps
0
Chris
Top achievements
Rank 1
answered on 07 Nov 2012, 12:17 PM
Jan-Dirk - I appreciate the attempt to help but I know how to get started with a Kendo Mobile app and have layouts, views, templates and data sources setup. The link you included makes no mention of the datepicker or any other widgets and honestly felt a bit condescending. 

My question was how can I use the Kendo UI Datepicker widget in a mobile app. A search of the Icenium forums did not turn up any results.

Thanks.
0
Jan-Dirk
Top achievements
Rank 1
answered on 07 Nov 2012, 12:35 PM
Sorry Chris, but from your post I couldn't see that you are an experienced developer and unfortunately you can't mention your experience level in your profile.
0
Chris
Top achievements
Rank 1
answered on 07 Nov 2012, 02:58 PM
Jan-Dirk: No problem and thanks.

Do you or anyone else have any links to instructions on using Kendo Widgets in Kendo Mobile?

Thank you for your time.
0
Jordan
Telerik team
answered on 07 Nov 2012, 10:33 PM
Hello Chris,

the native date picker is supported only on iOS 5+ and is pretty simple to use:

<input type="date" name="fromDate" id="fromDate" />

It may be possible to use Kendo UI date picker on mobile, but it may no be very touch optimized experience. Let me know if you want to go that way after checking this demo on your target devices?

The third option is to use this mobile optimized date-picker http://code.google.com/p/mobiscroll/ when on Android and < iOS 5.

Hope this helps,

Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Cihan
Top achievements
Rank 1
answered on 15 Feb 2013, 02:34 PM
Hi Jordan,

Your first solution it's working on iOS platform but on Android side it's not working. The other solution like mobiscroll is working user can select date on screen but mobiscroll set and cancel click events not working i think it's about the css error or bug?

Do you have advice for android datepicker?

Kind Regards.
0
Jordan
Telerik team
answered on 18 Feb 2013, 09:54 AM
Hi Cihan,

Please check if  what suggested for similar question at Stack Overflow will work for you.

All the best,

Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Cihan
Top achievements
Rank 1
answered on 19 Feb 2013, 10:49 AM
Hi Jordan,

I tried to answer on Stack Overflow but it did not work to me. Still Mobiscroll clieck events not working.

Kind Regards.
0
Jordan
Telerik team
answered on 22 Feb 2013, 10:23 AM
Hi Cihan,

It took me just few minutes and it just works as expected Cancel closes Set works as well both in simulator and on device?

Downloaded the latest mobiscroll from here: http://download.mobiscroll.com/datetime/prod#/datetime/animation/en/jquery

Here is the code sample i ended with made on top of fresh Kendo project:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="scripts/mobiscroll.custom-2.4.3.min.js"></script>
 
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
        <link href="styles/mobiscroll.custom-2.4.3.min.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" id="tabstrip-home" data-title="Hello World!">
            <h1>DatePicker with Mobiscroll and Kendo Mobile</h1>
            <input type="date" id="startDate"/>
        </div>
 
        <script>
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            $(function() {
                $('#startDate').scroller({
                    preset: 'date',
                    invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
                    theme: 'sense-ui',
                    display: 'modal',
                    mode: 'mixed',
                    animate: 'swing',
                    dateOrder: 'mmD ddyy'
                });   
            });
            $(document.documentElement).off("touchmove");
        </script>
    </body>
</html>
All the best,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Cihan
Top achievements
Rank 1
answered on 22 Feb 2013, 02:35 PM
Hello,

Thanks for your help Jordan. Firstly, it didn't work again because i didn't see if i add mobiscroll css file directly name is too long and IDE didn't add file this is the missing part of me :\

Kind Regards.
0
Jordan
Telerik team
answered on 23 Feb 2013, 12:31 PM
Hi Chris,

Please rename the file to something shorter then.

Kind regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Eren
Top achievements
Rank 1
answered on 08 Jul 2013, 02:32 PM
I have a problem about native date pickers. I tried to use two " <input type="date"/>  <input type="date"/>  ". I built in my Samsung S3 first date picker worked fine but when i touch second one app crashed and locked. ???
0
Steve
Telerik team
answered on 09 Jul 2013, 11:46 AM
Hi Eren,

A quick search shows that there are several bug reports (e.g. this one), which describe similar behavior on Samsung OEM devices and that it works in Android AOSP.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.
0
Eren
Top achievements
Rank 1
answered on 09 Jul 2013, 02:32 PM
Thanks Steve.
0
Brian
Top achievements
Rank 1
answered on 06 May 2014, 08:15 PM
Jordan,
How do you access the date value when using the native iOS datepicker after selecting a date. Where does this value get stored?

Thanks in advance!
0
Kaloyan
Telerik team
answered on 09 May 2014, 12:56 PM
Hello David,

If you are asking about the mobiscroll date-picker, you can find the getDate method within their online documentation.

If you want to access the value from the input tag, you can check this StackOverflow thread where a very good explanation is provided in details.

I hope this helps.

Regards,
Kaloyan
Telerik
 

Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

 
Tags
General Discussion
Asked by
Chris
Top achievements
Rank 1
Answers by
Jan-Dirk
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Jordan
Telerik team
Cihan
Top achievements
Rank 1
Eren
Top achievements
Rank 1
Steve
Telerik team
Brian
Top achievements
Rank 1
Kaloyan
Telerik team
Share this question
or