Skip to content
This repository was archived by the owner on Oct 23, 2019. It is now read-only.

minutesStep, secondsStep and showSeconds options #7

Open
korun wants to merge 8 commits into
base: add-timepicker
Choose a base branch
from
Open

minutesStep, secondsStep and showSeconds options #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31b028b
Set 5 seconds step instead of 1
darklow Oct 3, 2014
cbe36d1
Use bootstrap3 classes for timepicker inputs
darklow Oct 3, 2014
d7247df
Use current time when pressing "Today" and showTime is used
darklow Oct 3, 2014
47da458
Add 5 minute step too instead of 1
darklow Oct 3, 2014
9f94983
Fix tests related to setting current time when pressing Today button
darklow Oct 3, 2014
8455f0b
Merge branch 'add-timepicker-tests' into time-options
korun Dec 20, 2014
280cf51
Timepicker: add minutesStep and secondsStep options.
korun Dec 20, 2014
a06b425
Timepicker: add showSeconds option.
korun Dec 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 59 additions & 47 deletions js/bootstrap-datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
if (this.component && this.component.length === 0)
this.component = false;

this.picker = $(DPGlobal.template);
this.picker = $(DPGlobal.template(this.o));
this._buildEvents();
this._attachEvents();

Expand Down Expand Up @@ -199,6 +199,9 @@

o.startView = Math.max(o.startView, o.minViewMode);

o.minutesStep = Math.max(defaults.minutesStep, o.minutesStep);
o.secondsStep = Math.max(defaults.secondsStep, o.secondsStep);

// true, false, or Number > 0
if (o.multidate !== true){
o.multidate = Number(o.multidate) || false;
Expand Down Expand Up @@ -976,7 +979,7 @@
break;
case 'today':
var date = new Date();
date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());

this.showMode(-2);
var which = this.o.todayBtn === 'linked' ? null : 'view';
Expand Down Expand Up @@ -1302,6 +1305,7 @@
showTime: function(){
if (this.o.showTime) {
this.picker.find('[name=ampm]').hide();
this.picker.find('[name=second]').toggle(this.o.showSeconds);
} else {
if (!this.o.todayBtn && !this.o.clearBtn){
this.picker.find('tfoot').hide();
Expand Down Expand Up @@ -1473,10 +1477,13 @@
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
minutesStep: 1,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
secondsStep: 1,
showSeconds: false,
showTime: false,
startDate: -Infinity,
startView: 0,
Expand Down Expand Up @@ -1691,32 +1698,34 @@
return date.join('');
},

timepickerTemplate: function(){
var optionTags = function(min, max){
timepickerTemplate: function (opts) {
var optionTags = function(min, max, step){
var s = '';
for (var i = min; i < max; i++){
for (var i = min; i < max; i += step || 1) {
var val = ('0' + i).slice(-2);
s += '<option value="' + val + '">' + val + '</option>';
}
return s;
};

return '<tr>'+
'<th class="timepicker" colspan="7">'+
'<select class="time" name="hour">'+
'<th class="timepicker form-inline" colspan="7">'+
'<select class="time form-control" name="hour">'+
optionTags(0, 24)+
'</select>'+
'<select class="time" name="minute">'+
optionTags(0, 60)+
'<select class="time form-control" name="minute">'+
optionTags(0, 60, opts.minutesStep) +
'</select>'+
'<select class="time" name="second">'+
optionTags(0, 60)+
'<select class="time form-control" name="second">'+
optionTags(0, 60, opts.secondsStep) +
'</select>'+
'<select class="time" name="ampm">'+
'<select class="time form-control" name="ampm">'+
'<option value="am">am</option>'+
'<option value="pm">pm</option>'+
'</select>'+
'<button class="btn btn-success btn-small">Set</button>'+
'<button class="btn btn-success">' +
'<span class="glyphicon glyphicon-ok"></span>' +
'</button>'+
'</th>'+
'</tr>';
},
Expand All @@ -1731,40 +1740,43 @@
contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
};

DPGlobal.footTemplate =
'<tfoot>' +
DPGlobal.timepickerTemplate()+
'<tr>'+
'<th colspan="7" class="today"></th>'+
'</tr>'+
'<tr>'+
'<th colspan="7" class="clear"></th>'+
'</tr>'+
'</tfoot>';

DPGlobal.template = '<div class="datepicker">'+
'<div class="datepicker-days">'+
'<table class=" table-condensed">'+
DPGlobal.headTemplate+
'<tbody></tbody>'+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'<div class="datepicker-months">'+
'<table class="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'<div class="datepicker-years">'+
'<table class="table-condensed">'+
DPGlobal.headTemplate+
DPGlobal.contTemplate+
DPGlobal.footTemplate+
'</table>'+
'</div>'+
'</div>';
DPGlobal.footTemplate = function (opts) {
return '<tfoot>' +
DPGlobal.timepickerTemplate(opts) +
'<tr>' +
'<th colspan="7" class="today"></th>' +
'</tr>' +
'<tr>' +
'<th colspan="7" class="clear"></th>' +
'</tr>' +
'</tfoot>';
};

DPGlobal.template = function (options) {
return '<div class="datepicker">' +
'<div class="datepicker-days">' +
'<table class=" table-condensed">' +
DPGlobal.headTemplate +
'<tbody></tbody>' +
DPGlobal.footTemplate(options) +
'</table>' +
'</div>' +
'<div class="datepicker-months">' +
'<table class="table-condensed">' +
DPGlobal.headTemplate +
DPGlobal.contTemplate +
DPGlobal.footTemplate(options) +
'</table>' +
'</div>' +
'<div class="datepicker-years">' +
'<table class="table-condensed">' +
DPGlobal.headTemplate +
DPGlobal.contTemplate +
DPGlobal.footTemplate(options) +
'</table>' +
'</div>' +
'</div>';
};

$.fn.datepicker.DPGlobal = DPGlobal;

Expand Down
126 changes: 120 additions & 6 deletions tests/suites/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ test('Today Button: moves to today\'s date', function(){
target.click();

var d = new Date(),
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate());
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
datesEqual(dp.viewDate, today);
datesEqual(dp.dates[0], UTCDate(2012, 2, 5));
});
Expand All @@ -232,7 +232,7 @@ test('Today Button: "linked" selects today\'s date', function(){
target.click();

var d = new Date(),
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate());
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds());
datesEqual(dp.viewDate, today);
datesEqual(dp.dates[0], today);
});
Expand Down Expand Up @@ -700,16 +700,130 @@ test('showTime', function () {
ok(select.is(':visible'), 'Minutes is visible');
equal(select.val(), '09');
select.val('59');
// Seconds
ok(target.find('select.time[name=second]').is(':not(:visible)'), 'Seconds is hidden by default');

ok(target.find('select.time[name=ampm]').is(':not(:visible)'), 'AM/PM is hidden by default');

target.find('button').click();
ok(picker.is(':not(:visible)'), 'Picker is hidden');
datesEqual(dp.dates[0], UTCDate(2012, 2, 5, 17, 59, 57));
datesEqual(dp.viewDate, UTCDate(2012, 2, 5, 17, 59, 57));
});

test('minutesStep', function () {
var input = $('<input />')
.appendTo('#qunit-fixture')
.val('2012-03-05 15:10:57')
.datepicker({
format: 'yyyy-mm-dd h:i:s',
showTime: true,
minutesStep: 5
}),
dp = input.data('datepicker'),
picker = dp.picker,
select = picker.find('.datepicker-days tfoot th.timepicker select.time[name=minute]');

input.focus();

equal(select.children('option:first').val(), '00');
equal(select.children('option:eq(1)').val(), '05');
equal(select.children('option').length, 12);
});

test('minutesStep with negative value', function () {
var input = $('<input />')
.appendTo('#qunit-fixture')
.val('2012-03-05 15:9:57')
.datepicker({
format: 'yyyy-mm-dd h:i:s',
showTime: true,
minutesStep: -2
}),
dp = input.data('datepicker'),
picker = dp.picker,
select = picker.find('.datepicker-days tfoot th.timepicker select.time[name=minute]');

input.focus();

equal(select.children('option:first').val(), '00');
equal(select.children('option:eq(1)').val(), '01');
equal(select.children('option').length, 60);
});

// test('minutesStep round value', function () {
// TODO
// });

test('secondsStep', function () {
var input = $('<input />')
.appendTo('#qunit-fixture')
.val('2012-03-05 15:9:55')
.datepicker({
format: 'yyyy-mm-dd h:i:s',
showTime: true,
secondsStep: 5
}),
dp = input.data('datepicker'),
picker = dp.picker,
select = picker.find('.datepicker-days tfoot th.timepicker select.time[name=second]');

input.focus();

equal(select.children('option:first').val(), '00');
equal(select.children('option:eq(1)').val(), '05');
equal(select.children('option').length, 12);
});

test('secondsStep with negative value', function () {
var input = $('<input />')
.appendTo('#qunit-fixture')
.val('2012-03-05 15:9:55')
.datepicker({
format: 'yyyy-mm-dd h:i:s',
showTime: true,
secondsStep: -2
}),
dp = input.data('datepicker'),
picker = dp.picker,
select = picker.find('.datepicker-days tfoot th.timepicker select.time[name=second]');

input.focus();

equal(select.children('option:first').val(), '00');
equal(select.children('option:eq(1)').val(), '01');
equal(select.children('option').length, 60);
});

// test('secondsStep round value', function () {
// TODO
// });

test('showSeconds', function () {
var input = $('<input />')
.appendTo('#qunit-fixture')
.val('2012-03-05 15:9:57')
.datepicker({
format: 'yyyy-mm-dd h:i:s',
showSeconds: true,
showTime: true
}),
dp = input.data('datepicker'),
picker = dp.picker,
target, select;

input.focus();

target = picker.find('.datepicker-days tfoot th.timepicker');

// Seconds
select = target.find('select.time[name=second]');
ok(select.is(':visible'), 'Seconds is visible');
equal(select.val(), '57');
select.val('02');

ok(target.find('select.time[name=ampm]').is(':not(:visible)'), 'AM/PM is hidden by default');

target.find('button').click();
ok(picker.is(':not(:visible)'), 'Picker is hidden');
datesEqual(dp.dates[0], UTCDate(2012, 2, 5, 17, 59, 2));
datesEqual(dp.viewDate, UTCDate(2012, 2, 5, 17, 59, 2));
datesEqual(dp.dates[0], UTCDate(2012, 2, 5, 15, 9, 2));
datesEqual(dp.viewDate, UTCDate(2012, 2, 5, 15, 9, 2));
});