// vim: et:ts=4:sw=4:sts=4:ft=javascript /*@ Ox.DateInput DateInput Element () -> DateInput Element (options) -> DateInput Element (options, self) -> DateInput Element options Options object format format can be short, medium, long value date value, defaults to current date weekday weekday width width of individual input elements, in px day width of day input element month width of month input element weekday width of weekday input element year width of year input element self Shared private variable change triggered on change of value @*/ 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) }); 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.$input = Ox.extend(self.options.weekday ? { weekday: Ox.Input({ autocomplete: self.weekdays, autocompleteReplace: true, autocompleteReplaceCorrect: true, id: 'weekday', value: Ox.formatDate(self.date, self.formats.weekday), width: self.options.width.weekday }) .bindEvent('autocomplete', changeWeekday), } : {}, { day: Ox.Input({ autocomplete: Ox.range(1, Ox.getDaysInMonth( 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(); }), autocompleteReplace: true, autocompleteReplaceCorrect: true, id: 'day', value: Ox.formatDate(self.date, self.formats.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); }) : self.months, 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 }) .bindEvent('autocomplete', changeMonthOrYear), year: Ox.Input({ autocomplete: Ox.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)).map(function(i) { return i.toString(); }), autocompleteReplace: true, autocompleteReplaceCorrect: true, id: 'year', value: Ox.formatDate(self.date, self.formats.year), textAlign: 'right', width: self.options.width.year }) .bindEvent('autocomplete', changeMonthOrYear) }); that = Ox.InputGroup(Ox.extend(self.options, { id: self.options.id, inputs: Ox.merge(self.options.weekday ? [ 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 ]), separators: Ox.merge(self.options.weekday ? [ {title: self.options.format == 'short' ? '' : ',', width: 8}, ] : [], self.options.format == 'short' ? [ {title: '-', width: 8}, {title: '-', width: 8} ] : [ {title: '', width: 8}, {title: ',', width: 8} ]), width: 0 }), self); //Ox.Log('Form', 'SELF', self) function changeDay() { self.options.weekday && self.$input.weekday.options({ value: Ox.formatDate(new Date([ self.$input.month.options('value'), self.$input.day.options('value'), self.$input.year.options('value') ].join(' ')), self.formats.weekday) }); setValue(); } function changeMonthOrYear() { var day = self.$input.day.options('value'), month = self.$input.month.options('value'), year = self.$input.year.options('value'), days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month); day = day <= days ? day : days; //Ox.Log('Form', year, month, 'day days', day, days) self.options.weekday && self.$input.weekday.options({ value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday) }); self.$input.day.options({ autocomplete: Ox.range(1, days + 1).map(function(i) { return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString(); }), value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString() }); setValue(); } 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.month.options({value: date.month}); 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(); }), value: date.day }); self.$input.year.options({value: date.year}); setValue(); } function getDateInWeek(weekday, month, day, year) { //Ox.Log('Form', [month, day, year].join(' ')) 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) }; } function setValue() { self.options.value = Ox.formatDate(new Date(self.options.format == 'short' ? [ self.$input.year.options('value'), self.$input.month.options('value'), self.$input.day.options('value') ].join('/') : [ self.$input.month.options('value'), self.$input.day.options('value'), self.$input.year.options('value') ].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) } } */ /* that.serialize = function() { var normal = normalize(); return [normal.year, normal.month, normal.day].join('-'); } */ return that; };