I am using v4 from https://github.com/Eonasdan/bootstrap-datetimepicker. Now I am trying to disable the minutes-selector on time-selection. I know I could use:
$(this).datetimepicker({
format: 'HH'
});
But with this code, minutes aren't shown at all. I would like to show minutes in the selector, but disable it. Any chance to achieve that?
I tried using dp.show
and dp.change
events to handle it.
In the show event minutes element are disabled in order to avoid minutes changing and the hour part is taken and followed by :00
.
Code:
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker({
format: 'HH:mm'
}).on('dp.show', function () {
$('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true);
$('span.timepicker-minute[data-action="showMinutes"]').removeAttr('data-action').attr('disabled', true).text('00');
}).on('dp.change', function () {
$(this).val($(this).val().split(':')[0]+':00')
$('span.timepicker-minute').text('00')
});
Demo: http://jsfiddle.net/mfjvnh9a/
I've found a solution. Use this time-format:
format: 'HH:00'
set plugin option 'minView' => 1
$(this).datetimepicker({ steps: 60 });
If you do this when you loose focus the plugin adjusts your time to :00 for your minutes (if you happen to type the date).