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'
});

Louys Patrice Bessette · Accepted Answer · 2018-06-20T13:49:26.910

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.

This code is working fine other details are also selective i need to allow only this 4 values to be selective — vijay singh chauhan, Jun 20 '18 at 11:47
now its return not a valid minute on every selection even if i select the minute 00,15,30,45 — vijay singh chauhan, Jun 21 '18 at 06:24
i have used this solution https://stackoverflow.com/a/39708260/3173027 for selection restriction — vijay singh chauhan, Jun 21 '18 at 06:29
You see that it is working correctly on the snippet and CodePen... I don't know why it return *"Not a valid minute click"* on good selections. You obviously made a mistake copying my solution. — Louys Patrice Bessette, Jun 21 '18 at 13:19

score 1 · Answer 2 · answered Jun 20 '18 at 10:19

1

To show minutes in 15 minutes interval you need to change in jquery-clockpicker.js at line 222 from i += 5 to i += 15. See below screenshot for more information

answered Jun 20 '18 at 10:19

Harsh Barach

947
9
18

1

this change will hide the other number in window but i am still able to select those number – vijay singh chauhan Jun 20 '18 at 10:29

score 0 · Answer 3 · answered Feb 22 '22 at 12:49

How about this?

Based on Louys Patrice Bessette's answer I drew up a quick solution that should be more native to the picker and works for also allowing specific hour ranges (e.g. opening hours, etc.) - I believe this may be helpful to some of you, since it doesn't require to re-chose or any timeouts for displaying or anything "hacked"

There's only 1 change required in the *-clockpicker.js inside function mousedown(e, space) around line 243, just add

// When clicking on disabled field -> do nothing
if ($(e.target).closest('.clockpicker-tick-disabled').length === 1) {
  e.preventDefault();
  return false;
}

in the very beginning of the function.

Then similar to the answer given add your clock picker control

<div id="time_picker" class="input-group clockpicker">
  <input placeholder="Time" type="text" class="form-control">
  <span class="input-group-addon">
    <span class="fa fa-clock-o fa-2"></span>
  </span>
</div>

define your valid (e.g. hour) range

var hour_min = 10;
var hour_max = 17;
var ticksDisabled = false;

and bind the mouseover function to figure out whether this specific (e.g. hour) is available or not

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

Then initialize the picker and change the class for all items that are not in the valid range (update the rule to your liking)

$('#time_picker').clockpicker({
    autoclose: true,
    donetext: "Done",
    afterShow: function() {  // Disable all hours out of range
        $(".clockpicker-hours").find(".clockpicker-tick").filter(function(index,element){
            return !(parseInt($(element).html()) >= hour_min && parseInt($(element).html()) <= hour_max);      
        }).removeClass('clockpicker-tick').addClass('clockpicker-tick-disabled');
    },
});

In order to have the "grayed-out" hours outside valid range and the "not-allowed" mouse pointer on the plate, I added some styles

.clockpicker-tick-disabled {
    border-radius: 50%;
    color: rgb(192, 192, 192);
    line-height: 26px;
    text-align: center;
    width: 26px;
    height: 26px;
    position: absolute;
    cursor: not-allowed;
}

Have fun!

How to restrict minute selection in clockpicker.js

3 Answers3