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

Native Datepickers

16 Answers 398 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.

16 Answers, 1 is accepted

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.

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.