Best Period Picker
copysite.v.3

TimePicker like picker in mobile devices

Draggable, touchable, use mousewheel and keyboard. This plugin can be downloaded with PeriodPicker

   Buy and Download

Options

Name default Descr Ex.
clickAndSelect true You can click on any digit in picker, and this value will choosen {clickAndSelect:false}

Example

jQuery('#timepicker1').TimePickerAlone({
clickAndSelect: false
});
dragAndDrop true Enable/disable drag and drop in picker {dragAndDrop:false}

Example

jQuery('#timepicker2').TimePickerAlone({
dragAndDrop: false
});
mouseWheel true Enable/disable mousewheel in picker {mouseWheel:false}

Example

jQuery('#timepicker3').TimePickerAlone({
mouseWheel: false
});
inverseMouseWheel false if you want reverse mousewhhel behavior use it {inverseMouseWheel:true}

Example

jQuery('#timepicker4').TimePickerAlone({
inverseMouseWheel: false
});
listenKeyPress true When you click on some time's part(second,minutes etc) you can enter key(0-9) and this value will be choosen {listenKeyPress:true}

Example

jQuery('#timepicker5').TimePickerAlone({
listenKeyPress: false
});
saveOnChange true When you choose some time in picker in input field value will be updated too {saveOnChange:true}

Example

jQuery('#timepicker6').TimePickerAlone({
saveOnChange: false
});
onChange 
function (str, datetime) {
	//console.log(str);
	//console.log(datetime);
}
 Event is triggered when time is changed {onChange:alert}
onHide 
function () {return true;}
 Event is triggered when timepicker is closed. If it returns false the picker will not be closed

Example

jQuery('#timepicker7').TimePickerAlone({
	onHide: function ($input) {
		return $input.val() === '12:34:00';
	}
});
twelveHoursFormat true Use 12 am/pm hours format {twelveHoursFormat: false}

Example

jQuery('#timepicker8').TimePickerAlone({
twelveHoursFormat: false
});
inputFormat 'HH:mm:ss' Use 12 am/pm hours format {inputFormat:'H:m'}

Example

jQuery('#timepicker9').TimePickerAlone({
inputFormat: 'H:m'
});
defaultTime '00:00:00' Start time if in input field attribute "value" empty. In format inputFormat {defaultTime:'23:45'}

Example

jQuery('#timepicker11').TimePickerAlone({
defaultTime:'23:45'
});
hours true Show hours picker {hours:false}

Example

jQuery('#timepicker12').TimePickerAlone({
hours:false
});
minutes true Show minutes picker {minutes:false}

Example

jQuery('#timepicker13').TimePickerAlone({
minutes:false
});
seconds false Show seconds picker {seconds:true}

Example

jQuery('#timepicker14').TimePickerAlone({
seconds:true
});
ampm true Show am/pm picker. You can use it without twelveHoursFormat {ampm:false}

Example

jQuery('#timepicker15').TimePickerAlone({
ampm:false
});
steps [1,1,1,1] Steps for picker [hours,minutes,seconds,ampm] {steps:[2,2,2,1]}

Example

jQuery('#timepicker16').TimePickerAlone({
steps:[2,2,2,1]
});
inline false Inline mode

Example

jQuery('#timepicker_inline').TimePickerAlone({
inline:true
});

Methods

destroy

Returns the initial field to its original state

jQuery('#timepicker15').TimePickerAlone('destroy');

regenerate

When you change something on the page, you can recalc all picker's states

$(window).on('resize', function(){
	jQuery('#timepicker15').TimePickerAlone('regenerate');
});

save

Save current picker state in original input

jQuery('#timepicker15').TimePickerAlone('save');

setValue

Set timepicker value

jQuery('#timepicker15').TimePickerAlone('setValue', '12:00', true); // true - means no trigger change if used saveOnChange
jQuery('#timepicker16').TimePickerAlone('setValue', new Date());

getValue

get current Date object value

console.log(jQuery('#timepicker15').TimePickerAlone('getValue'));

setMax

set maxumum of time

jQuery('#timepicker15').TimePickerAlone('setMax', new Date()); // now will be upper limit
jQuery('#timepicker16').TimePickerAlone('setMax', '10:00');

setMin

set minimum of time

jQuery('#timepicker15').TimePickerAlone('setMin', new Date()); // now is the lower limit
jQuery('#timepicker16').TimePickerAlone('setMin', '12:00');