Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for time picker. See #1 #18

Closed
wants to merge 13 commits into from
Closed

Support for time picker. See #1 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5d167d7
Added time picker options.
stas Dec 11, 2012
022c061
Added basic controllers for hour, minute and seconds.
stas Dec 11, 2012
c2a88fd
Refactor initial ui with number inputs. Selects are much pleasent.
stas Dec 12, 2012
6c4abc6
Fix indentation.
stas Dec 12, 2012
84adccb
Refactor `toString` method to include time if was set.
stas Dec 12, 2012
8f7f442
Handle hours and mintues selection. Added the new method `setTime`
stas Dec 12, 2012
4c42aff
Do not reset date on every selection. Do not reset hours if timepicke…
stas Dec 12, 2012
d1a34d6
Update full year on changes.
stas Dec 12, 2012
abe3379
Use a better date comparison.
stas Dec 12, 2012
3b9698e
Cleanup a bit.
stas Dec 12, 2012
5f3dcf1
Re-render time inputs default value if it is available.
stas Dec 12, 2012
5d93647
Disable time picker and fix an early call to internal date object.
stas Dec 13, 2012
6242ea5
Use uppercase for am/pm labels.
stas Dec 13, 2012
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
15 changes: 14 additions & 1 deletion css/pikaday.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,17 @@
background: #ff8000 !important;
box-shadow: none !important;
border-radius: 3px !important;
}
}

.pika-time {
width: 50%;
margin: 0 auto;
}

.pika-time tbody {
text-align: center;
}

.pika-time-sep {
width: 10px;
}
177 changes: 167 additions & 10 deletions pikaday.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,7 @@

compareDates = function(a,b)
{
// weak date comparison (use date.setHours(0,0,0,0) to ensure correct result)
return a.getTime() === b.getTime();
return a.toDateString() === b.toDateString()
},

extend = function(to, from, overwrite)
Expand Down Expand Up @@ -157,9 +156,16 @@
months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
//monthsShort : ['Jan_Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
timeTitles : ['Hours', 'Minutes']
},

// time picker
showTimePicker: false,
minuteStep: 1,
defaultTime: false, // set a `Date` object to change
showMeridian: true,

// callback function
onSelect: null,
onOpen: null,
Expand Down Expand Up @@ -265,6 +271,94 @@
return html += '</div>';
},

renderTimeHourOpts = function(meridian, defTime)
{
var html = '', start = 0, end = 23;

if (meridian) {
start = 1;
end = 11;
}

for (var i = start; i <= end; i++) {
var label = (i > 9) ? i : '0' + i;
var selected = (defTime.getHours() === i) ? true : false;
var value = i;

if (meridian) {
// Add meridian initials
label = (meridian === true) ? label + ' AM' : label;
label = (meridian === 'pm') ? label + ' PM' : label;

// Find selected
selected = (meridian === true && defTime.getHours() === i ) ? true : false;
selected = (meridian === 'pm' && defTime.getHours() === i + 12 ) ? true : false;
value = i + 12;
}

html += '<option value="' + value + (selected ? '" selected' : '"') + '>' + label + '</option>';
}

if (meridian === true) {
return html += renderTimeHourOpts('pm', defTime);
} else {
return html;
}
},

renderTimeMinuteOpts = function(step, defTime)
{
var html = '';

for (var i = 0; i <= 59; i += step) {
var label = (i > 9) ? i : '0' + i;
var selected = (defTime.getMinutes() === i) ? true : false;

html += '<option value="' + i + (selected ? '" selected' : '"') + '>' + label + '</option>';
}

return html;
},

renderTimeInput = function(opts)
{
var html = '', currentTime = new Date(Date.parse(opts.field.value));
currentTime = isDate(currentTime) ? currentTime : opts.defaultTime;

html += '<td data-hour="0" ><select class="pika-select pika-time-hour">' +
renderTimeHourOpts(opts.showMeridian, currentTime) +
'</select></td>';

html += '<td class="pika-time-sep"><span>:</span></td>';

html += '<td data-minute="0"><select class="pika-select pika-time-minute">' +
renderTimeMinuteOpts(opts.minuteStep, currentTime) +
'</select></td>';

return html;
},

renderTimeTitles = function(opts)
{
var html = '',
titles = opts.i18n.timeTitles;

html += '<th scope="col pika-time-hour">' + titles[0] + '</th>';
html += '<th scope="col pika-time-sep">&nbsp;</th>';
html += '<th scope="col pika-time-minute">' + titles[1] + '</th>';

return html;
},

renderTimeTable = function(opts)
{
return '<table cellpadding="0" cellspacing="0" class="pika-table pika-time"><thead><tr>' +
renderTimeTitles(opts) +
'</tr></thead><tbody><tr>' +
renderTimeInput(opts) +
'</tr></tbody></table>';
},

renderTable = function(opts, data)
{
return '<table cellpadding="0" cellspacing="0" class="pika-table">' + renderHead(opts) + renderBody(data) + '</table>';
Expand Down Expand Up @@ -331,6 +425,12 @@
else if (hasClass(target, 'pika-select-year')) {
self.gotoYear(target.value);
}
else if (hasClass(target, 'pika-time-hour')) {
self.setTime(target.value, null);
}
else if (hasClass(target, 'pika-time-minute')) {
self.setTime(null, target.value);
}
};

self._onInputChange = function(e)
Expand Down Expand Up @@ -405,14 +505,20 @@
opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
}
addEvent(opts.field, 'change', self._onInputChange);

if (!opts.defaultDate) {
if (hasMoment && opts.field.value) {
opts.defaultDate = window.moment(opts.field.value, opts.format).toDate();
} else {
opts.defaultDate = new Date(Date.parse(opts.field.value));
}
opts.setDefaultDate = true;

if (!opts.defaultTime && !isDate(opts.defaultDate)) {
opts.defaultTime = new Date();
} else {
opts.defaultTime = opts.defaultDate;
}
}
}

Expand Down Expand Up @@ -504,7 +610,16 @@
*/
toString: function(format)
{
return !isDate(this._d) ? '' : hasMoment ? window.moment(this._d).format(format || this._o.format) : this._d.toDateString();
var value = '';

if (isDate(this._d)) {
if (hasMoment) {
value = window.moment(this._d).format(format || this._o.format);
} else {
value = this._o.showTimePicker ? this._d.toString() : this._d.toDateString();
}
}
return value;
},

/**
Expand All @@ -523,6 +638,30 @@
return isDate(this._d) ? new Date(this._d.getTime()) : null;
},

/**
* set the current time selection
*/
setTime: function(hours, minutes)
{
hours = parseInt(hours);
minutes = parseInt(minutes);

if (!isNaN(hours) && isDate(this._d)) {
this._d.setHours(hours);
}

if (!isNaN(minutes) && isDate(this._d)) {
this._d.setMinutes(minutes);
}

if (this._o.field) {
this._o.field.value = this.toString();
}
if (typeof this._o.onSelect === 'function') {
this._o.onSelect.call(this, this.getDate());
}
},

/**
* set the current selection
*/
Expand All @@ -548,8 +687,17 @@
date = max;
}

this._d = new Date(date.getTime());
this._d.setHours(0,0,0,0);
if (!isDate(this._d)) {
this._d = new Date(date.getTime());
} else {
this._d.setDate(date.getDate());
this._d.setMonth(date.getMonth());
this._d.setFullYear(date.getFullYear());
}

if (!this._o.showTimePicker) {
this._d.setHours(0,0,0,0);
}
this.gotoDate(this._d);

if (this._o.field) {
Expand Down Expand Up @@ -673,7 +821,11 @@
before = new Date(year, month, 1).getDay(),
data = [],
row = [];
now.setHours(0,0,0,0);

if (!this._o.showTimePicker && isDate(this._d)) {
this._d.setHours(0,0,0,0);
}

if (opts.firstDay > 0) {
before -= opts.firstDay;
if (before < 0) {
Expand Down Expand Up @@ -702,7 +854,12 @@
r = 0;
}
}
return renderTable(opts, data);

if (opts.showTimePicker) {
return renderTable(opts, data) + renderTimeTable(opts);
} else {
return renderTable(opts, data);
}
},

isVisible: function()
Expand Down Expand Up @@ -764,4 +921,4 @@

};

})(window, window.document);
})(window, window.document);