Page MenuHomePhabricator
Differential D13010 Diff 31372 webroot/rsrc/js/core/behavior-fancy-datepicker.js

Changeset View

Standalone View

View Options

webroot/rsrc/js/core/behavior-fancy-datepicker.js

Show First 20 Lines • Show All 72 Lines • ▼ Show 20 Lines var ontoggle = function(e) {
var box = e.getTarget(); var box = e.getTarget();
root = e.getNode('phabricator-date-control'); root = e.getNode('phabricator-date-control');
JX.Stratcom.getData(root).disabled = !box.checked; JX.Stratcom.getData(root).disabled = !box.checked;
redraw_inputs(); redraw_inputs();
}; };
var get_inputs = function() { var get_inputs = function() {
return { return {
y: JX.DOM.find(root, 'select', 'year-input'), d: JX.DOM.find(root, 'input', 'date-input'),
m: JX.DOM.find(root, 'select', 'month-input'),
d: JX.DOM.find(root, 'select', 'day-input'),
t: JX.DOM.find(root, 'input', 'time-input') t: JX.DOM.find(root, 'input', 'time-input')
}; };
}; };
var read_date = function() { var read_date = function() {
var i = get_inputs(); var i = get_inputs();
value_y = +i.y.value; var date = i.d.value;
value_m = +i.m.value; var parts = date.split('/');
value_d = +i.d.value; value_y = +parts[2];
value_m = +parts[0];
value_d = +parts[1];
}; };
var write_date = function() { var write_date = function() {
var i = get_inputs(); var i = get_inputs();
i.y.value = value_y; i.d.value = value_m + '/' + value_d + '/' + value_y;
i.m.value = value_m;
i.d.value = value_d;
}; };
var render = function() { var render = function() {
JX.DOM.setContent( JX.DOM.setContent(
picker.firstChild, picker.firstChild,
[ [
render_month(), render_month(),
render_day() render_day()
Show All 20 Lines var cell = function(label, value, selected, class_name) {
} }
if (!value) { if (!value) {
class_name += ' novalue'; class_name += ' novalue';
} }
return JX.$N('td', {meta: {value: value}, className: class_name}, label); return JX.$N('td', {meta: {value: value}, className: class_name}, label);
}; };
// Render the top bar which allows you to pick a month and year. // Render the top bar which allows you to pick a month and year.
var render_month = function() { var render_month = function() {
var valid_date = getValidDate();
var month = valid_date.getMonth();
var year = valid_date.getYear() + 1900;
var months = [ var months = [
'January', 'January',
'February', 'February',
'March', 'March',
'April', 'April',
'May', 'May',
'June', 'June',
'July', 'July',
'August', 'August',
'September', 'September',
'October', 'October',
'November', 'November',
'December']; 'December'];
var buttons = [ var buttons = [
cell('\u25C0', 'm:-1', false, 'lrbutton'), cell('\u25C0', 'm:-1', false, 'lrbutton'),
cell(months[value_m - 1] + ' ' + value_y, null), cell(months[month] + ' ' + year, null),
cell('\u25B6', 'm:1', false, 'lrbutton')]; cell('\u25B6', 'm:1', false, 'lrbutton')];
return JX.$N( return JX.$N(
'table', 'table',
{className: 'month-table'}, {className: 'month-table'},
JX.$N('tr', {}, buttons)); JX.$N('tr', {}, buttons));
}; };
function getValidDate() {
var written_date = new Date(value_y, value_m-1, value_d);
if (isNaN(written_date.getTime())) {
return new Date();
} else {
return written_date;
}
}
// Render the day-of-week and calendar views. // Render the day-of-week and calendar views.
var render_day = function() { var render_day = function() {
var today = new Date();
var valid_date = getValidDate();
var weeks = []; var weeks = [];
// First, render the weekday names. // First, render the weekday names.
var weekdays = 'SMTWTFS'; var weekdays = 'SMTWTFS';
var weekday_names = []; var weekday_names = [];
var ii; var ii;
for (ii = 0; ii < weekdays.length; ii++) { for (ii = 0; ii < weekdays.length; ii++) {
weekday_names.push(cell(weekdays.charAt(ii), null, false, 'day-name')); weekday_names.push(cell(weekdays.charAt(ii), null, false, 'day-name'));
} }
weeks.push(JX.$N('tr', {}, weekday_names)); weeks.push(JX.$N('tr', {}, weekday_names));
// Render the calendar itself. NOTE: Javascript uses 0-based month indexes // Render the calendar itself. NOTE: Javascript uses 0-based month indexes
// while we use 1-based month indexes, so we have to adjust for that. // while we use 1-based month indexes, so we have to adjust for that.
var days = []; var days = [];
var start = new Date(value_y, value_m - 1, 1).getDay(); var start = new Date(
valid_date.getYear() + 1900,
valid_date.getMonth(),
1).getDay();
while (start--) { while (start--) {
days.push(cell('', null, false, 'day-placeholder')); days.push(cell('', null, false, 'day-placeholder'));
} }
var today = new Date();
for (ii = 1; ii <= 31; ii++) { for (ii = 1; ii <= 31; ii++) {
var date = new Date(value_y, value_m - 1, ii); var date = new Date(
if (date.getMonth() != (value_m - 1)) { valid_date.getYear() + 1900,
valid_date.getMonth(),
ii);
if (date.getMonth() != (valid_date.getMonth())) {
// We've spilled over into the next month, so stop rendering. // We've spilled over into the next month, so stop rendering.
break; break;
} }
var is_today = (today.getYear() == date.getYear() && var is_today = (today.getYear() == date.getYear() &&
today.getMonth() == date.getMonth() && today.getMonth() == date.getMonth() &&
today.getDate() == date.getDate()); today.getDate() == date.getDate());
var classes = []; var classes = [];
classes.push('day'); classes.push('day');
if (is_today) { if (is_today) {
classes.push('today'); classes.push('today');
} }
if (date.getDay() === 0 || date.getDay() == 6) { if (date.getDay() === 0 || date.getDay() == 6) {
classes.push('weekend'); classes.push('weekend');
} }
days.push(cell(ii, 'd:'+ii, value_d == ii, classes.join(' '))); days.push(cell(
ii,
'd:'+ii,
valid_date.getDate() == ii,
classes.join(' ')));
} }
// Slice the days into weeks. // Slice the days into weeks.
for (ii = 0; ii < days.length; ii += 7) { for (ii = 0; ii < days.length; ii += 7) {
weeks.push(JX.$N('tr', {}, days.slice(ii, ii + 7))); weeks.push(JX.$N('tr', {}, days.slice(ii, ii + 7)));
} }
return JX.$N('table', {className: 'day-table'}, weeks); return JX.$N('table', {className: 'day-table'}, weeks);
Show All 40 Lines function(e) {
// Enable the control. // Enable the control.
JX.Stratcom.getData(root).disabled = false; JX.Stratcom.getData(root).disabled = false;
redraw_inputs(); redraw_inputs();
render(); render();
}); });
JX.Stratcom.listen('click', null, function(e){
if (e.getNode('phabricator-datepicker')) {
return;
}
onclose();
});
}); });
Phabricator · Built by Phacility