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

177 lines
5.6 KiB
JavaScript
Raw Normal View History

2011-04-23 16:45:50 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=js
2011-05-16 10:49:48 +00:00
/*@
Ox.TimeInput <f:Ox.Element> TimeInput Object
() -> <f> TimeInput Object
(options) -> <f> TimeInput Object
(options, self) -> <f> TimeInput Object
options <o> Options object
ampm <b|false> 24h/ampm
seconds <b|false> show seconds
milliseconds <b|false> show milliseconds
value <d> value, defaults to now
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.TimeInput = function(options, self) {
// fixme: seconds get set even if options.seconds is false
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
ampm: false,
seconds: false,
milliseconds: false,
value: Ox.formatDate(new Date(), '%T'),
2011-06-01 20:12:22 +00:00
/*
2011-06-01 18:38:58 +00:00
width: {
hours: 32,
minutes: 32,
seconds: 32,
milliseconds: 40,
ampm: 32
}
2011-06-01 20:12:22 +00:00
*/
2011-04-22 22:03:10 +00:00
})
.options(options || {});
if (self.options.milliseconds) {
self.options.seconds = true;
if (self.options.value.indexOf('.') == -1) {
self.options.value += '.000';
}
}
self.date = getDate();
self.values = getValues();
self.$input = {
hours: new Ox.Input({
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'hours',
textAlign: 'right',
value: self.values.hours,
2011-06-01 20:12:22 +00:00
width: 32//self.options.width.hours
2011-04-22 22:03:10 +00:00
}),
minutes: new Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'minutes',
textAlign: 'right',
value: self.values.minutes,
2011-06-01 20:12:22 +00:00
width: 32//self.options.width.minutes
2011-04-22 22:03:10 +00:00
}),
seconds: new Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'seconds',
textAlign: 'right',
value: self.values.seconds,
2011-06-01 20:12:22 +00:00
width: 32//self.options.width.seconds
2011-04-22 22:03:10 +00:00
}),
milliseconds: new Ox.Input({
autocomplete: $.map(Ox.range(0, 1000), function(v) {
return Ox.pad(v, 3);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'milliseconds',
textAlign: 'right',
value: self.values.milliseconds,
2011-06-01 20:12:22 +00:00
width: 40//self.options.width.milliseconds
2011-04-22 22:03:10 +00:00
}),
ampm: new Ox.Input({
autocomplete: ['AM', 'PM'],
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: 'ampm',
value: self.values.ampm,
2011-06-01 20:12:22 +00:00
width: 32//self.options.width.seconds
2011-04-22 22:03:10 +00:00
})
};
that = new Ox.InputGroup($.extend(self.options, {
inputs: $.merge($.merge($.merge([
self.$input.hours,
self.$input.minutes,
], self.options.seconds ? [
self.$input.seconds
] : []), self.options.milliseconds ? [
self.$input.milliseconds
] : []), self.options.ampm ? [
self.$input.ampm
] : []),
separators: $.merge($.merge($.merge([
{title: ':', width: 8},
], self.options.seconds ? [
{title: ':', width: 8}
] : []), self.options.milliseconds ? [
{title: '.', width: 8}
] : []), self.options.ampm ? [
{title: '', width: 8}
] : []),
//width: self.options.width || 128
}), self)
.bindEvent('change', setValue);
setValue();
function getDate() {
return new Date('1970/01/01 ' + (
self.options.milliseconds ?
self.options.value.substr(0, self.options.value.length - 4) :
self.options.value
));
}
function getValues() {
self.date = getDate();
return {
ampm: Ox.formatDate(self.date, '%p'),
hours: Ox.formatDate(self.date, self.options.ampm ? '%I' : '%H'),
milliseconds: self.options.milliseconds ? self.options.value.substr(-3) : '000',
minutes: Ox.formatDate(self.date, '%M'),
seconds: Ox.formatDate(self.date, '%S')
};
}
function setValue() {
self.options.value = Ox.formatDate(new Date('1970/01/01 ' + [
self.$input.hours.options('value'),
self.$input.minutes.options('value'),
self.options.seconds ? self.$input.seconds.options('value') : '00'
].join(':') + (self.options.ampm ? ' ' + self.$input.ampm.options('value') : '')),
(self.options.seconds? '%T' : '%H:%M')) +
(self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : '');
//Ox.print('SETVALUE', self.options.value);
}
function setValues() {
self.values = getValues();
Ox.forEach(self.$input, function(v, k) {
self.$input[k].options({
value: self.values[k]
});
});
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'value') {
setValues();
}
}
return that;
};