datetimepicker use native datetimepicker on mobile

Question

I am working on a project where i use a plugin that is using an datetimepicker, to enter a date and time. This is working great on desktop computer. You can choose your date and time in the same window.

But on mobile devices iphone and andriod, it is not looking good. And i cant find a option to choose between the native ios and andriod datetimepicker function.

Html

 <input type="text" class="form-control" id="PickupTime" name="pick_up_time" placeholder="date">

Javascript

var dateTimeOptions = {
  format: 'DD/MM/YYYY HH:mm',
  sideBySide: true,
  useCurrent: true,
  minDate: minDate,
  showClose: true,
  showClear: true,
  widgetPositioning: {
    horizontal: dateTimePickerPosition
  },
  icons: {
    up: 'fa fa-arrow-up',
    down: 'fa fa-arrow-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right'
  }
};

jQuery('#PickupTime').datetimepicker(dateTimeOptions);

Can someone help to solve this.

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Use this Detecting iOS / Android Operating system to detect whether device is a mobile or not then depending on that you would change type of your <input> and call(or not) datetimepicker

if(deviceIsMobile) {
    jQuery('#PickupTime').attr('type','date');
} else {
     jQuery('#PickupTime').datetimepicker(dateTimeOptions);
}

I need to mention that you cannot enforce date selection rules such as mindate etc while using native controls

edited May 23 '17 at 12:00

Community

1
1

answered Mar 03 '17 at 02:02

Vinay

7,442
6
25
48

Thank you for your response, i need date and time. is that possible with type="date" or do i need to datetime-local? – Adem Ak Mar 03 '17 at 20:55
Yes datetime-local is needed for date and time. – Vinay Mar 04 '17 at 16:55

datetimepicker use native datetimepicker on mobile

1 Answers1