oxjs/source/Ox.UI/js/Form/Ox.DateInput.js

219 lines
7.8 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 10:49:48 +00:00
/*@
Ox.DateInput <f:Ox.Element> DateInput Element
() -> <f> DateInput Element
(options) -> <f> DateInput Element
(options, self) -> <f> DateInput Element
options <o> Options object
format <s|short> format can be short, medium, long
value <d> date value, defaults to current date
2011-05-16 10:49:48 +00:00
weekday <b|false> weekday
width <o> width of individual input elements, in px
day <n> width of day input element
month <n> width of month input element
weekday <n> width of weekday input element
year <n> width of year input element
2011-05-16 10:49:48 +00:00
self <o> Shared private variable
2011-11-03 15:42:41 +00:00
change <!> triggered on change of value
2011-05-16 10:49:48 +00:00
@*/
Ox.DateInput = function(options, self) {
2011-04-22 22:03:10 +00:00
var that;
self = Ox.extend(self || {}, {
2011-12-21 13:42:47 +00:00
options: Ox.extend({
format: 'short',
value: Ox.formatDate(new Date(), '%F'),
weekday: false,
width: {
day: 32,
month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
weekday: options.format == 'long' ? 80 : 40,
year: 48
}
}, options || {})
});
2011-04-22 22:03:10 +00:00
2011-12-21 13:42:47 +00:00
self.formats = {
day: '%d',
month: self.options.format == 'short' ? '%m' :
(self.options.format == 'medium' ? '%b' : '%B'),
weekday: self.options.format == 'long' ? '%A' : '%a',
year: '%Y'
};
self.months = self.options.format == 'long' ? Ox.MONTHS : Ox.SHORT_MONTHS;
self.weekdays = self.options.format == 'long' ? Ox.WEEKDAYS : Ox.SHORT_WEEKDAYS;
2011-04-22 22:03:10 +00:00
self.$input = Ox.extend(self.options.weekday ? {
weekday: Ox.Input({
2011-04-22 22:03:10 +00:00
autocomplete: self.weekdays,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'weekday',
width: self.options.width.weekday
})
.bindEvent('autocomplete', changeWeekday),
} : {}, {
day: Ox.Input({
autocomplete: Ox.range(1, Ox.getDaysInMonth(
2011-04-22 22:03:10 +00:00
parseInt(Ox.formatDate(self.date, '%Y'), 10),
parseInt(Ox.formatDate(self.date, '%m'), 10)
) + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
2011-04-22 22:03:10 +00:00
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'day',
textAlign: 'right',
width: self.options.width.day
})
.bindEvent('autocomplete', changeDay),
month: Ox.Input({
autocomplete: self.options.format == 'short' ? Ox.range(1, 13).map(function(i) {
return Ox.pad(i, 2);
2011-04-22 22:03:10 +00:00
}) : self.months,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'month',
textAlign: self.options.format == 'short' ? 'right' : 'left',
width: self.options.width.month
})
.bindEvent('autocomplete', changeMonthOrYear),
year: Ox.Input({
autocomplete: Ox.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)).map(function(i) {
return i.toString();
2011-04-22 22:03:10 +00:00
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'year',
textAlign: 'right',
width: self.options.width.year
})
.bindEvent('autocomplete', changeMonthOrYear)
});
that = Ox.InputGroup(Ox.extend(self.options, {
2011-04-22 22:03:10 +00:00
id: self.options.id,
inputs: Ox.merge(self.options.weekday ? [
2011-04-22 22:03:10 +00:00
self.$input.weekday
] : [], self.options.format == 'short' ? [
self.$input.year, self.$input.month, self.$input.day
] : [
self.$input.month, self.$input.day, self.$input.year
]),
2011-12-21 13:42:47 +00:00
join: join,
separators: Ox.merge(self.options.weekday ? [
2011-04-22 22:03:10 +00:00
{title: self.options.format == 'short' ? '' : ',', width: 8},
] : [], self.options.format == 'short' ? [
{title: '-', width: 8}, {title: '-', width: 8}
] : [
{title: '', width: 8}, {title: ',', width: 8}
]),
2011-12-21 13:42:47 +00:00
split: split,
value: self.options.value,
2011-04-22 22:03:10 +00:00
width: 0
}), self);
function changeDay() {
2011-12-21 15:33:52 +00:00
self.options.weekday && self.$input.weekday.value(
Ox.formatDate(new Date([
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
2011-04-22 22:03:10 +00:00
].join(' ')), self.formats.weekday)
2011-12-21 15:33:52 +00:00
);
2011-12-21 13:42:47 +00:00
self.options.value = join();
2011-04-22 22:03:10 +00:00
}
function changeMonthOrYear() {
2011-12-21 15:33:52 +00:00
var day = self.$input.day.value(),
month = self.$input.month.value(),
year = self.$input.year.value(),
2011-04-22 22:03:10 +00:00
days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month);
day = day <= days ? day : days;
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', year, month, 'day days', day, days)
2011-12-21 15:33:52 +00:00
self.options.weekday && self.$input.weekday.value(
Ox.formatDate(
new Date([month, day, year].join(' ')),
self.formats.weekday
)
);
2011-04-22 22:03:10 +00:00
self.$input.day.options({
autocomplete: Ox.range(1, days + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
2011-04-22 22:03:10 +00:00
}),
value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString()
});
2011-12-21 13:42:47 +00:00
self.options.value = join();
2011-04-22 22:03:10 +00:00
}
function changeWeekday() {
var date = getDateInWeek(
2011-12-21 15:33:52 +00:00
self.$input.weekday.value(),
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
2011-12-21 13:42:47 +00:00
);
2011-12-21 15:33:52 +00:00
self.$input.month.value(date.month);
2011-04-22 22:03:10 +00:00
self.$input.day.options({
autocomplete: Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1).map(function(i) {
return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
2011-04-22 22:03:10 +00:00
}),
value: date.day
});
2011-12-21 15:33:52 +00:00
self.$input.year.value(date.year);
2011-12-21 13:42:47 +00:00
self.options.value = join();
}
function getDate(value) {
return new Date(self.options.value.replace(/-/g, '/'));
2011-04-22 22:03:10 +00:00
}
function getDateInWeek(weekday, month, day, year) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', [month, day, year].join(' '))
2011-04-22 22:03:10 +00:00
var date = new Date([month, day, year].join(' '));
date = Ox.getDateInWeek(date, weekday);
return {
day: Ox.formatDate(date, self.formats.day),
month: Ox.formatDate(date, self.formats.month),
year: Ox.formatDate(date, self.formats.year)
};
}
2011-12-21 13:42:47 +00:00
function getValues() {
var date = getDate();
return {
day: Ox.formatDate(date, self.formats.day),
month: Ox.formatDate(date, self.formats.month),
weekday: Ox.formatDate(date, self.formats.weekday),
year: Ox.formatDate(date, self.formats.year)
};
}
function join() {
return Ox.formatDate(new Date(self.options.format == 'short' ? [
2011-12-21 15:33:52 +00:00
self.$input.year.value(),
self.$input.month.value(),
self.$input.day.value()
2011-04-22 22:03:10 +00:00
].join('/') : [
2011-12-21 15:33:52 +00:00
self.$input.month.value(),
self.$input.day.value(),
self.$input.year.value()
2011-04-22 22:03:10 +00:00
].join(' ')), '%F');
}
2011-12-21 13:42:47 +00:00
function split() {
var values = getValues();
return Ox.merge(self.options.weekday ? [
values.weekday
] : [], self.options.format == 'short' ? [
values.year, values.month, values.day
] : [
values.month, values.day, values.year
])
2011-04-22 22:03:10 +00:00
}
return that;
};