如何在 clockpicker.js 中限制分钟选择

Question

我正在使用 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 });

我正在使用以下代码：

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

Answer 1

要以 15 分钟 间隔显示分钟，您需要在 jquery-clockpicker.js 中更改 行 222 从 i += 5 到 i += 15。有关详细信息，请参见下面的屏幕截图

Answer 2

与稍微修改插件代码本身的其他答案相反，这是一个允许按原样使用它的解决方案...

使用 afterShow 回调和 .filter() 方法，只需删除不在 choices 数组中的所有 "ticks"。

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">

-- 编辑--
所以上面的内容只是在时钟上显示想要的选择。但正如评论中正确提到的那样，用户仍然没有 "limited" 可见的分钟选择。

所以我带来了一个漂亮的 hacky 脚本来限制可能性。

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">

我在 CodePen 上解决了。

Answer 3

这个怎么样？

根据 Louys Patrice Bessette 的回答，我制定了一个快速解决方案，该解决方案应该更适合选择器，并且还允许特定的时间范围（例如营业时间，等）-我相信这可能对你们中的一些人有帮助，因为它不需要 re-chose 或任何显示超时或任何“被黑”

第243行function mousedown(e, space)内的*-clockpicker.js只需要修改1处，只需添加

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

在函数的开头。

然后类似于给出的答案添加您的时钟选择器控件

<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>

定义您的有效（例如小时）范围

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

并绑定鼠标悬停功能来判断这个特定的（例如小时）是否可用

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

然后初始化选择器并为所有不在有效范围内的项目更改class（根据您的喜好更新规则）

$('#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');
    },
});

为了让“grayed-out”小时超出有效范围和“not-allowed”鼠标指针在盘子上，我添加了一些样式

.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;
}

玩得开心！

如何在 clockpicker.js 中限制分钟选择

How to restrict minute selection in clockpicker.js

jquery

clockpicker