1 /*jshint node:true, indent:2, curly:true, eqeqeq:true, immed:true, latedef:true, newcap:true, noarg:true,
2 regexp:true, undef:true, trailing:true, white:true */
3 /*global XT:true, XV:true, enyo:true, _:true, Globalize:true */
9 @class An input control used to specify a date.<br />
10 Reformats and sets a date entered either as a date type or a string.
11 If a string is not a recognizable date, sets the input to null.<br />
12 The superkind of {@link XV.DateWidget}.
16 /** @lends XV.DateWidget# */{
17 name: "XV.DateWidget",
18 kind: "XV.InputWidget",
19 classes: "xv-input xv-datewidget",
25 {kind: "FittableColumns", components: [
26 {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
27 // setting the tag to "div" on the decorator
28 // so that clicks of button don't get redirected back
29 // to the input field (default behavior)
30 {kind: "onyx.InputDecorator", name: "decorator", tag: "div",
31 classes: "xv-icon-decorator", components: [
32 {name: "input", kind: "onyx.Input", onchange: "inputChanged",
33 onkeydown: "keyDown"},
34 {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
35 classes: "icon-calendar"}
37 {name: "datePickPopup", kind: "onyx.Popup", maxHeight: 400, floating: true,
38 centered: true, modal: true, components: [
39 // TODO: get rid of this inline style
40 {kind: "GTS.DatePicker", name: "datePick", style: "min-width:400px;",
41 onChange: "datePicked"}
47 This function handles a date chosen via the
48 datepicker versus text entered into the input field.
50 datePicked: function (inSender, inEvent) {
51 var date = inEvent, options = {};
52 // mimic the human-typed behavior
53 this.applyTimezoneOffset(date);
55 options.silent = true;
56 this.setValue(date, options);
57 this.$.datePickPopup.hide();
60 disabledChanged: function () {
61 this.inherited(arguments);
62 this.$.label.addRemoveClass("disabled", this.getDisabled());
65 This function handles the click of the calendar icon
66 that opens the datepicker.
68 iconTapped: function (inSender, inEvent) {
69 this.$.datePickPopup.show();
70 this.$.datePick.render();
73 Returns the value in the input field of the widget.
75 getValueToString: function (value) {
76 return this.$.input.value;
79 Sets the value of date programatically.
81 @param {Date|String} value Can be Date or Date String
82 @param {Object} options
84 setValue: function (value, options) {
85 var nullValue = this.getNullValue();
87 if (_.isString(value)) {
88 value = this.validate(value);
90 value = new Date(value.valueOf()); // clone
92 if (isNaN(value.getTime())) {
98 XV.InputWidget.prototype.setValue.call(this, value, options);
101 This function takes the value entered into a DateWidget and returns
102 the correct date object for this value. If the value does not correspond
103 to a valid date, the function returns false.
105 textToDate: function (value) {
107 daysInMilliseconds = 1000 * 60 * 60 * 24;
109 // Try to parse out a date given the various allowable shortcuts
111 value.indexOf('+') === 0 ||
112 value.indexOf('-') === 0) {
113 // 0 means today, +1 means tomorrow, -2 means 2 days ago, etc.
114 date = new Date(new Date().getTime() + value * daysInMilliseconds);
115 } else if (value.indexOf('#') === 0) {
116 // #40 means the fortieth day of this year, so set the month to 0
117 // and set the date accordingly. JS appropriately pushes the date
118 // into subsequent months as necessary
119 // Only allow number strings and not "" after the "#"
120 if (/^\d+$/.test(value.substring(1))) {
123 date.setDate(value.substring(1));
125 } else if (value.length && !isNaN(value)) {
126 // A positive integer by itself means that day of this month
130 // This number is limited to the number of days in the current month.
131 // If the user enters 60, the date will be the last day of the month.
132 var lastDayOfMonth = new Date();
133 lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1);
134 lastDayOfMonth.setDate(0);
135 if (lastDayOfMonth.getTime() < date.getTime()) {
136 date = lastDayOfMonth;
139 // If we get to this point, we're assuming that either the user is trying to enter a date
140 // and not one of the functions. We allow the JS Date to parse the date so we can allow
143 // Here we are trying to leniently limit what we pass to the JS Date function since it evaluates
144 // invalid strings such as "%1678" as a date. It may still allow some crazy strings, but these will
145 // return an Invalid Date object and we will catch it later. If we need more stingent checking, we
146 // would have to lock the users into entering dates in a specific format.
147 if (/^\d+[\/\-\.]\d+[\/\-\.]\d+/.test(value)) {
148 date = new Date(value);
152 // Check here to see if date is actually a Date. If it is "Invalid Date", then it may
153 // pass _.isDate and still not truly be a valid Date object.
154 if (!_.isDate(date) || isNaN(date.getTime())) {
158 // TODO: This little hacky block of code was making all years < 2000 convert to 2000s
159 // Firefox does not assume that these dates are in the 2000s so there's a little trickery here
160 // if (date.getFullYear() < 2000) {
161 // date.setYear("20" + value.substring(value.length - 2));
166 date = this.applyTimezoneOffset(date);
171 This function strips the time from a valid date and mimics the model's
172 action of offseting the time by the timezone for the sake of what the user
173 sees populated in the input box. This action is undone just before the value
174 is set into the model.
176 applyTimezoneOffset: function (value) {
177 value.setHours(0, 0, 0, 0);
178 return XT.date.applyTimezoneOffset(value, false);
181 This function calls textToDate, which converts the text to a valid date,
184 validate: function (value) {
185 value = this.textToDate(value);
186 // if textToDate is not able to convert the entered value, it returns false
187 return ((_.isDate(value) || _.isEmpty(value)) && value !== false) ? value : false;
190 This function puts the date in the correct format based on the locale set in Globalize.
191 It also puts back the timezoneoffset that was done in the validation function before it
192 sends the value to the model.
194 valueChanged: function (value) {
195 var nullValue = this.getNullValue();
196 if (_.isDate(value) && _.isDate(nullValue) &&
197 XT.date.compareDate(value, nullValue) === 0) {
198 value = this.getNullText();
200 value = XT.date.applyTimezoneOffset(value, true);
201 value = Globalize.format(value, "d");
206 if (!this.$.input.value && this.$.input.attributes.value) {
207 // XXX workaround for incident 19171. Something deep into enyo's
208 // setters are causing the attributes value to be updated when
209 // a value is entered but not updated when the empty string is
210 // entered. Seems to only affect date widgets due to the complicated
211 // two-step of turning a inputted value into an actual date.
212 this.$.input.attributes.value = "";
215 this.$.datePick.setValue(value ? value : new Date());
216 this.$.datePick.render();
218 return XV.InputWidget.prototype.valueChanged.call(this, value);