forked from 0x2620/oxjs
form elements rewrite, part 1
This commit is contained in:
rlx
parent
cf567e5608
commit
7f83cd3141
30 changed files with 1061 additions and 958 deletions
|
|
@ -21,31 +21,28 @@ Ox.DateInput = function(options, self) {
|
|||
|
||||
var that;
|
||||
self = Ox.extend(self || {}, {
|
||||
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)
|
||||
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 || {})
|
||||
});
|
||||
|
||||
Ox.extend(self, {
|
||||
date: new Date(self.options.value.replace(/-/g, '/')),
|
||||
formats: {
|
||||
day: '%d',
|
||||
month: self.options.format == 'short' ? '%m' :
|
||||
(self.options.format == 'medium' ? '%b' : '%B'),
|
||||
weekday: self.options.format == 'long' ? '%A' : '%a',
|
||||
year: '%Y'
|
||||
},
|
||||
months: self.options.format == 'long' ? Ox.MONTHS : Ox.SHORT_MONTHS,
|
||||
weekdays: self.options.format == 'long' ? Ox.WEEKDAYS : Ox.SHORT_WEEKDAYS
|
||||
});
|
||||
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;
|
||||
|
||||
self.$input = Ox.extend(self.options.weekday ? {
|
||||
weekday: Ox.Input({
|
||||
|
|
@ -53,7 +50,6 @@ Ox.DateInput = function(options, self) {
|
|||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
id: 'weekday',
|
||||
value: Ox.formatDate(self.date, self.formats.weekday),
|
||||
width: self.options.width.weekday
|
||||
})
|
||||
.bindEvent('autocomplete', changeWeekday),
|
||||
|
|
@ -68,7 +64,6 @@ Ox.DateInput = function(options, self) {
|
|||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
id: 'day',
|
||||
value: Ox.formatDate(self.date, self.formats.day),
|
||||
textAlign: 'right',
|
||||
width: self.options.width.day
|
||||
})
|
||||
|
|
@ -80,7 +75,6 @@ Ox.DateInput = function(options, self) {
|
|||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
id: 'month',
|
||||
value: Ox.formatDate(self.date, self.formats.month),
|
||||
textAlign: self.options.format == 'short' ? 'right' : 'left',
|
||||
width: self.options.width.month
|
||||
})
|
||||
|
|
@ -92,7 +86,6 @@ Ox.DateInput = function(options, self) {
|
|||
autocompleteReplace: true,
|
||||
autocompleteReplaceCorrect: true,
|
||||
id: 'year',
|
||||
value: Ox.formatDate(self.date, self.formats.year),
|
||||
textAlign: 'right',
|
||||
width: self.options.width.year
|
||||
})
|
||||
|
|
@ -108,10 +101,7 @@ Ox.DateInput = function(options, self) {
|
|||
] : [
|
||||
self.$input.month, self.$input.day, self.$input.year
|
||||
]),
|
||||
joinValues: function(values) {
|
||||
setValue();
|
||||
return self.options.value;
|
||||
},
|
||||
join: join,
|
||||
separators: Ox.merge(self.options.weekday ? [
|
||||
{title: self.options.format == 'short' ? '' : ',', width: 8},
|
||||
] : [], self.options.format == 'short' ? [
|
||||
|
|
@ -119,11 +109,11 @@ Ox.DateInput = function(options, self) {
|
|||
] : [
|
||||
{title: '', width: 8}, {title: ',', width: 8}
|
||||
]),
|
||||
split: split,
|
||||
value: self.options.value,
|
||||
width: 0
|
||||
}), self);
|
||||
|
||||
//Ox.Log('Form', 'SELF', self)
|
||||
|
||||
function changeDay() {
|
||||
self.options.weekday && self.$input.weekday.options({
|
||||
value: Ox.formatDate(new Date([
|
||||
|
|
@ -132,7 +122,7 @@ Ox.DateInput = function(options, self) {
|
|||
self.$input.year.options('value')
|
||||
].join(' ')), self.formats.weekday)
|
||||
});
|
||||
setValue();
|
||||
self.options.value = join();
|
||||
}
|
||||
|
||||
function changeMonthOrYear() {
|
||||
|
|
@ -151,16 +141,16 @@ Ox.DateInput = function(options, self) {
|
|||
}),
|
||||
value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString()
|
||||
});
|
||||
setValue();
|
||||
self.options.value = join();
|
||||
}
|
||||
|
||||
function changeWeekday() {
|
||||
var date = getDateInWeek(
|
||||
self.$input.weekday.options('value'),
|
||||
self.$input.month.options('value'),
|
||||
self.$input.day.options('value'),
|
||||
self.$input.year.options('value')
|
||||
);
|
||||
self.$input.weekday.options('value'),
|
||||
self.$input.month.options('value'),
|
||||
self.$input.day.options('value'),
|
||||
self.$input.year.options('value')
|
||||
);
|
||||
self.$input.month.options({value: date.month});
|
||||
self.$input.day.options({
|
||||
autocomplete: Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1).map(function(i) {
|
||||
|
|
@ -169,7 +159,12 @@ Ox.DateInput = function(options, self) {
|
|||
value: date.day
|
||||
});
|
||||
self.$input.year.options({value: date.year});
|
||||
setValue();
|
||||
self.options.value = join();
|
||||
Ox.print('self.options.value =', self.options.value)
|
||||
}
|
||||
|
||||
function getDate(value) {
|
||||
return new Date(self.options.value.replace(/-/g, '/'));
|
||||
}
|
||||
|
||||
function getDateInWeek(weekday, month, day, year) {
|
||||
|
|
@ -183,8 +178,18 @@ Ox.DateInput = function(options, self) {
|
|||
};
|
||||
}
|
||||
|
||||
function setValue() {
|
||||
self.options.value = Ox.formatDate(new Date(self.options.format == 'short' ? [
|
||||
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' ? [
|
||||
self.$input.year.options('value'),
|
||||
self.$input.month.options('value'),
|
||||
self.$input.day.options('value')
|
||||
|
|
@ -195,28 +200,16 @@ Ox.DateInput = function(options, self) {
|
|||
].join(' ')), '%F');
|
||||
}
|
||||
|
||||
/*
|
||||
function normalize() {
|
||||
var year = that.getInputById('year').options('value'),
|
||||
month = that.getInputById('month').options('value'),
|
||||
day = that.getInputById('day').options('value')
|
||||
return {
|
||||
year: year,
|
||||
month: self.options.format == 'short' ? month :
|
||||
Ox.pad((format == 'medium' ? Ox.WEEKDAYS.map(function(v, i) {
|
||||
return v.substr(0, 3);
|
||||
}) : Ox.WEEKDAYS).indexOf(month), 2),
|
||||
day: Ox.pad(day, 2)
|
||||
}
|
||||
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
|
||||
])
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
that.serialize = function() {
|
||||
var normal = normalize();
|
||||
return [normal.year, normal.month, normal.day].join('-');
|
||||
}
|
||||
*/
|
||||
|
||||
return that;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue