Skip to content

Latest commit

 

History

History
95 lines (84 loc) · 2.05 KB

File metadata and controls

95 lines (84 loc) · 2.05 KB

jquery-nativepicker

provides html5-input types as a fallback for common javascript controls

Features

  • toggles a html5-input picker control
  • integrates with common javascript controls

Examples

Using Bootstrap Datepicker

$('.datepicker').datepicker().nativepicker({
  type: 'date',
  change: function(value) {
    $(this).datepicker('update', value ? new Date(value) : "");
  }, 
  show: function() {
    var value = $(this).data('datepicker').getDate();
    $(this).data('nativePicker').setPickerValue(value);
  }
})

Using Bootstrap Select

note that bootstrap-select has built-in support for native-select on mobile.

$('.selectpicker').selectpicker().nativepicker({
  toggle: function() {
    return $(this).next().find('.btn');
  }
});  

Native only

$('.nativepicker').nativepicker({
  toggle: function() {
    return $($(this).next('.btn')[0]);
  }
});

Get access to the plugin-instance:

var nativepicker = $(".nativepicker").data('nativepicker');

Options

event that triggers the native picker
NameDescriptionDefault
changecallback that fires when the nativepicker value has changed
pickerfunction for retrieving the native input
showcallback that fires before the nativepicker shows up
togglefunction for retrieving the toggle element
toggleEventtouchstart mousedown
typetype of the native input, e.g. 'date'auto

Methods

NameDescriptionReturn
setPickerValuesets the picker valuevoid
getPickerValuegets the picker valuestring

Example Demo

http://rawgithub.com/benignware/jquery-nativepicker/master/examples/index.html