How to restrict minute selection in clockpicker.js

Question

I'm using the jQuery clockpicker plugin for some forms. I need to display only quater interval in minute section like 00 15 30 45. I read all the document but not able to find out the disable time section. I have found an example in timepicker.js

 $('#stepExample1').timepicker({ 'step': 15 });

I am using the below code:

$('.clockpicker').clockpicker({
placement: 'top',
align: 'left',
donetext: 'Done'
});

Answer 1

As opposed to the other answer where the plugin code itself is sligthly modified, here is a solution that allows to use it as is...

Using the afterShow callback and the .filter() method, just remove all the "ticks" that aren't in a choices array.

var input = $('#input-a');
var choices = ["00","15","30","45"];

input.clockpicker({
  autoclose: true,
  afterShow: function() {
    $(".clockpicker-minutes").find(".clockpicker-tick").filter(function(index,element){
      return !($.inArray($(element).text(), choices)!=-1)
    }).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

<input id="input-a">

---

-- EDIT --
So the above is about to show the wanted selections on the clock only. But as correctly mentionned in comment, the user still isn't "limited" to the visible minute selections.

So I came with a pretty hacky script to restrict the possibilities.

var input = $('#input-a');
var choices = ["00","15","30","45"];
var hourSelected = false;
var selectedHour = "";
var hiddenTicksDisabled = true;

input.clockpicker({
  autoclose: true,
  afterShow: function() {  // Remove all unwanted minute display.
    $(".clockpicker-minutes").find(".clockpicker-tick").filter(function(index,element){
      return !($.inArray($(element).text(), choices)!=-1)
    }).remove();
  },
  afterHourSelect:function(){  // To know if the hour is selected.
    setTimeout(function(){
      hourSelected = true;
    },50);
  },
  afterDone: function(){  // Keep the selected hour in memory.
    selectedHour = input.val().split(":")[0];
  }
});

// Handler to re-open the picker on "wrong" click.
$(document).on("click",".clockpicker-plate",function(e){

  if(hiddenTicksDisabled && hourSelected){
    console.log("NOT a valid minute click!");

    // Keep the hour value but clear the input field and reopen the picker at minutes
    setTimeout(function(){
      input.val(selectedHour);
      input.clockpicker('show').clockpicker('toggleView', 'minutes');
      input.val("");
    },400);

  }
});

// Handlers to toggle the "hiddenTicksDisabled"
$(document).on("mouseenter",".clockpicker-minutes>.clockpicker-tick",function(e){
  hiddenTicksDisabled = false;
});

$(document).on("mouseleave",".clockpicker-minutes>.clockpicker-tick",function(e){
  setTimeout(function(){
    hiddenTicksDisabled = true;
  },100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

<input id="input-a">

I worked it out on CodePen.