jquery datetimepicker maxTime and minTime not being updated onShow

Question

I'm using two datetimepickers inputs and am trying to grey out and prevent users from selecting invalid start and end times based on previous input in the datepickers. For example end time should never be before start time and vice-versa.

For some reason the times correctly start off greyed out, but when I try to select an earlier start time, the minTime doesn't change for the #availibility_end_time datepicker.

I found a similar close solution but it hasn't seemed to work for me.

$('#availability_start_time').datetimepicker({
  format: 'd/m/Y - H:i',
  timepicker: true,
  onShow: function( selected_time ){
    this.setOptions({
      value:$('#availability_end_time').val(),
      maxTime: $('#availability_end_time').val() 
    });
  }
});

$('#availability_end_time').datetimepicker({
  format: 'd/m/Y - H:i',
  timepicker: true,
  onShow: function( selected_time ){
    this.setOptions({
      value: $('#availability_end_time').val(),
      minTime: $('#availability_start_time').val() 
    });
  }
});