/** * @required $ jQuery, jQuery UI Datepicker * @required qs */ (function (ns) { /** * @alias lib.formElement.Date */ ns.Date = function (options) { this.construct.apply(this, arguments); }; ns.Date.prototype.construct = function (hiddenId, displayId, options) { this.name = 'lib.form.element.Date'; this.timeoutHandle = null; this.eventTimeout = 1000; this.hidden = $(document.getElementById(hiddenId)); this.element = $(document.getElementById(displayId)); if (1 !== this.element.length) { alert(this.name + ': can not find element with hiddenId = ' + displayId); return; } if (!this.element.is('input[type="text"]')) { alert(this.name + ': element (hiddenId = ' + displayId + ') is not "input"'); return; } options.onChangeMonthYear = $.proxy(this.onChangeMonthYear, this); options = $.extend($.datepicker.regional[ "uk" ], options); this.element.datepicker(options); var dateFormat = this.element.datepicker('option', 'dateFormat'); var sampleDate = $.datepicker.formatDate(dateFormat, new Date()); this.element.attr('maxlength', sampleDate.length); this.element.tooltip({ title: 'Date is in wrong format. Example: ' + sampleDate, trigger: 'manual' }); this.element.on('keyup', $.proxy(this.onKeyUp, this)); this.element.on('change', $.proxy(this.onChange, this)); this.element.closest('form').on('qsFormAfterSubmitSuccess', $.proxy(this.onQsFormAfterSubmitSuccess, this)); var date = this.hidden.val(); try { if (date && (date = $.datepicker.parseDate("yy-mm-dd", date))) { this.element.datepicker('setDate', date); } } catch (e) {} }; ns.Date.prototype.onQsFormAfterSubmitSuccess = function (e) { var data; if (e.response && false === e.response.isValid) { // refresh tooltip position if ((data = this.element.data('tooltip')) && data.$tip && data.$tip.is(':visible')) { this.element.tooltip('show'); } } }; ns.Date.prototype.onKeyUp = function () { clearTimeout(this.timeoutHandle); this.timeoutHandle = setTimeout($.proxy(this.dateChanged, this), this.eventTimeout); }; ns.Date.prototype.onChange = function () { this.dateChanged(); }; ns.Date.prototype.dateChanged = function () { var value = this.element.val(); var date; if (value) { try { date = $.datepicker.parseDate(this.element.datepicker('option', 'dateFormat'), value); } catch (e) {} } if (date && !isNaN(date)) { this.element.removeClass('error'); this.hideTip(); } else { if (value) { this.element.addClass('error'); this.showTip(); } else { this.hideTip(); } this.hidden.val(value); } this.hidden.trigger('change'); }; ns.Date.prototype.showTip = function () { var data; if ((data = this.element.data('tooltip')) && data.$tip && data.$tip.is(':visible')) { return; } this.element.tooltip('show'); }; ns.Date.prototype.hideTip = function () { this.element.tooltip('hide'); }; ns.Date.prototype.onChangeMonthYear = function (year, month, inst) { var day = null; if (1 <= inst.currentDay) { var daysInMonths = new Date(year, month, 0).getDate(); day = (inst.currentDay <= daysInMonths) ? inst.currentDay : daysInMonths; } else { day = new Date().getDate(); } var date = new Date(year, month - 1, day); if (date != this.element.datepicker('getDate')) { this.element.datepicker('setDate', date); // this.element.trigger('change'); } } })(qs.defineNS('lib.form.element'));