如何防止jQuery bootstrap ClockPicker获取不能被5整除的分钟数
How to prevent jQuery bootstrap ClockPicker to get minutes that are not divisible by 5
我正在使用 jQuery bootstrap ClockPicker 并且只需要获取他们的分钟可被 5 整除的时间。例如,如果用户 selects 13:08,ClockPicker 应该 select 13:05.
有没有办法覆盖 clockpicker 以向下舍入 selected 时间分钟?
我没有找到使用 API 执行此操作的方法。所以我写了一个使用 afterDone
回调。
我解析输入的值并进行更改以获得新的分钟值。
var clockpicker = $('.clockpicker').clockpicker({
afterDone: function() {
clockpicker.val(round());
}
}).find('input');
function round() {
var time = clockpicker.val(),
arr = time.split(':'),
hour = arr[0],
min = arr[1],
newMin = (Math.floor(parseInt(min) / 5)) * 5;
return hour + ':' + (newMin > 9 ? '' : '0') + newMin;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.js"></script>
<div class="input-group clockpicker col-xs-6">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
如果您不介意对 Clockpicker 进行更改(我必须为 IE 进行更改),请在 bootstrap-clockpicker.js 中添加一个非官方选项,例如 "roundmodfive":
1. 改变这个
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
...
2。通过这个
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value');
//Unofficial option added
/*
Just an explain:
I like rounding. Thus, for example 43min => 45 and 42min => 40.
The minutes are base 60, so you have to make modulus 60.
*/
if (this.options.roundmodfive) {
this.minutes = (Math.round(parseInt(this.minutes) / 5)) * 5 % 60;
}
var value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
...
我正在使用 jQuery bootstrap ClockPicker 并且只需要获取他们的分钟可被 5 整除的时间。例如,如果用户 selects 13:08,ClockPicker 应该 select 13:05.
有没有办法覆盖 clockpicker 以向下舍入 selected 时间分钟?
我没有找到使用 API 执行此操作的方法。所以我写了一个使用 afterDone
回调。
我解析输入的值并进行更改以获得新的分钟值。
var clockpicker = $('.clockpicker').clockpicker({
afterDone: function() {
clockpicker.val(round());
}
}).find('input');
function round() {
var time = clockpicker.val(),
arr = time.split(':'),
hour = arr[0],
min = arr[1],
newMin = (Math.floor(parseInt(min) / 5)) * 5;
return hour + ':' + (newMin > 9 ? '' : '0') + newMin;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.js"></script>
<div class="input-group clockpicker col-xs-6">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
如果您不介意对 Clockpicker 进行更改(我必须为 IE 进行更改),请在 bootstrap-clockpicker.js 中添加一个非官方选项,例如 "roundmodfive":
1. 改变这个
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
...
2。通过这个
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value');
//Unofficial option added
/*
Just an explain:
I like rounding. Thus, for example 43min => 45 and 42min => 40.
The minutes are base 60, so you have to make modulus 60.
*/
if (this.options.roundmodfive) {
this.minutes = (Math.round(parseInt(this.minutes) / 5)) * 5 % 60;
}
var value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
...