Native Datepickers

17 posts, 0 answers
  1. Chris
    Chris avatar
    4 posts
    Member since:
    Mar 2012

    Posted 06 Nov 2012 Link to this post

    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.
  2. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 07 Nov 2012 Link to this post

    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
  3. Chris
    Chris avatar
    4 posts
    Member since:
    Mar 2012

    Posted 07 Nov 2012 Link to this post

    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.
  4. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 07 Nov 2012 Link to this post

    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.
  5. Chris
    Chris avatar
    4 posts
    Member since:
    Mar 2012

    Posted 07 Nov 2012 Link to this post

    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.
  6. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 07 Nov 2012 Link to this post

    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.
  7. Cihan
    Cihan avatar
    13 posts
    Member since:
    Nov 2012

    Posted 15 Feb 2013 Link to this post

    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.
  8. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 18 Feb 2013 Link to this post

    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.
  9. Cihan
    Cihan avatar
    13 posts
    Member since:
    Nov 2012

    Posted 19 Feb 2013 Link to this post

    Hi Jordan,

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

    Kind Regards.
  10. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 22 Feb 2013 Link to this post

    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.
  11. Cihan
    Cihan avatar
    13 posts
    Member since:
    Nov 2012

    Posted 22 Feb 2013 Link to this post

    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.
  12. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 23 Feb 2013 Link to this post

    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.
  13. Eren
    Eren avatar
    4 posts
    Member since:
    Jun 2013

    Posted 08 Jul 2013 Link to this post

    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. ???
  14. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Jul 2013 Link to this post

    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.
  15. Eren
    Eren avatar
    4 posts
    Member since:
    Jun 2013

    Posted 09 Jul 2013 Link to this post

    Thanks Steve.
  16. Brian
    Brian avatar
    1 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Jordan Link to this post

    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!
  17. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 09 May 2014 Link to this post

    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!

     
Back to Top