Skip to content

Commit c72b67d

Browse files
committed
fix(datetime): fix min/max displayFormat and pickerFormat
Closes #8729
1 parent 45fcf76 commit c72b67d

File tree

2 files changed

+152
-7
lines changed

2 files changed

+152
-7
lines changed

src/components/datetime/datetime.ts

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
309309
* the datetime picker's columns. See the `pickerFormat` input description for
310310
* more info. Defaults to `MMM D, YYYY`.
311311
*/
312-
@Input() displayFormat: string = 'MMM D, YYYY';
312+
@Input() displayFormat: string;
313313

314314
/**
315315
* @input {string} The format of the date and time picker columns the user selects.
@@ -515,7 +515,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
515515
generate(picker: Picker) {
516516
// if a picker format wasn't provided, then fallback
517517
// to use the display format
518-
let template = this.pickerFormat || this.displayFormat;
518+
let template = this.pickerFormat || this.displayFormat || DEFAULT_FORMAT;
519519

520520
if (isPresent(template)) {
521521
// make sure we've got up to date sizing information
@@ -724,14 +724,15 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
724724
*/
725725
updateText() {
726726
// create the text of the formatted data
727-
this._text = renderDateTime(this.displayFormat, this._value, this._locale);
727+
const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT;
728+
this._text = renderDateTime(template, this._value, this._locale);
728729
}
729730

730731
/**
731732
* @private
732733
*/
733-
calcMinMax() {
734-
let todaysYear = new Date().getFullYear();
734+
calcMinMax(now?: Date) {
735+
const todaysYear = (now || new Date()).getFullYear();
735736

736737
if (isBlank(this.min)) {
737738
if (isPresent(this.yearValues)) {
@@ -751,8 +752,18 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
751752
}
752753
}
753754

754-
let min = this._min = parseDate(this.min);
755-
let max = this._max = parseDate(this.max);
755+
const min = this._min = parseDate(this.min);
756+
const max = this._max = parseDate(this.max);
757+
758+
if (min.year > max.year) {
759+
min.year = this._min.year = (max.year - 100);
760+
} else if (min.year === max.year) {
761+
if (min.month > max.month) {
762+
min.month = this._min.month = 1;
763+
} else if (min.month === max.month && min.day > max.day) {
764+
min.day = this._min.day = 1;
765+
}
766+
}
756767

757768
min.month = min.month || 1;
758769
min.day = min.day || 1;
@@ -915,3 +926,5 @@ function convertToArrayOfStrings(input: any, type: string): string[] {
915926
return values;
916927
}
917928
}
929+
930+
const DEFAULT_FORMAT = 'MMM D, YYYY';

src/components/datetime/test/datetime.spec.ts

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,78 @@ describe('DateTime', () => {
107107

108108
});
109109

110+
describe('writeValue', () => {
111+
112+
it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', () => {
113+
datetime.ngAfterContentInit();
114+
datetime.writeValue('1994-12-15T13:47:20.789Z');
115+
116+
expect(datetime._text).toEqual('Dec 15, 1994');
117+
});
118+
119+
it('should updateText with pickerFormat when no displayFormat', () => {
120+
datetime.pickerFormat = 'YYYY';
121+
datetime.ngAfterContentInit();
122+
datetime.writeValue('1994-12-15T13:47:20.789Z');
123+
124+
expect(datetime._text).toEqual('1994');
125+
});
126+
127+
it('should updateText with displayFormat when no pickerFormat', () => {
128+
datetime.displayFormat = 'YYYY';
129+
datetime.ngAfterContentInit();
130+
datetime.writeValue('1994-12-15T13:47:20.789Z');
131+
132+
expect(datetime._text).toEqual('1994');
133+
});
134+
135+
});
136+
110137
describe('generate', () => {
111138

139+
it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', () => {
140+
datetime.monthShortNames = customLocale.monthShortNames;
141+
datetime.ngAfterContentInit();
142+
datetime.setValue('1994-12-15T13:47:20.789Z');
143+
144+
var picker = new Picker(mockApp());
145+
datetime.generate(picker);
146+
var columns = picker.getColumns();
147+
148+
expect(columns.length).toEqual(3);
149+
expect(columns[0].name).toEqual('month');
150+
expect(columns[1].name).toEqual('day');
151+
expect(columns[2].name).toEqual('year');
152+
});
153+
154+
it('should generate with only displayFormat', () => {
155+
datetime.monthShortNames = customLocale.monthShortNames;
156+
datetime.ngAfterContentInit();
157+
datetime.displayFormat = 'YYYY';
158+
datetime.setValue('1994-12-15T13:47:20.789Z');
159+
160+
var picker = new Picker(mockApp());
161+
datetime.generate(picker);
162+
var columns = picker.getColumns();
163+
164+
expect(columns.length).toEqual(1);
165+
expect(columns[0].name).toEqual('year');
166+
});
167+
168+
it('should generate with only pickerFormat', () => {
169+
datetime.monthShortNames = customLocale.monthShortNames;
170+
datetime.ngAfterContentInit();
171+
datetime.pickerFormat = 'YYYY';
172+
datetime.setValue('1994-12-15T13:47:20.789Z');
173+
174+
var picker = new Picker(mockApp());
175+
datetime.generate(picker);
176+
var columns = picker.getColumns();
177+
178+
expect(columns.length).toEqual(1);
179+
expect(columns[0].name).toEqual('year');
180+
});
181+
112182
it('should generate with custom locale short month names from input property', () => {
113183
datetime.monthShortNames = customLocale.monthShortNames;
114184
datetime.ngAfterContentInit();
@@ -255,6 +325,68 @@ describe('DateTime', () => {
255325
expect(datetime._max.second).toEqual(59);
256326
});
257327

328+
it('should set max and min date when neither set', () => {
329+
const todaysDate = new Date();
330+
todaysDate.setFullYear(1994);
331+
332+
datetime.calcMinMax(todaysDate);
333+
334+
expect(datetime._min.year).toEqual(1894);
335+
expect(datetime._max.year).toEqual(1994);
336+
});
337+
338+
it('should set max date when min date far back in time, and only min set', () => {
339+
const todaysDate = new Date();
340+
todaysDate.setFullYear(1994);
341+
342+
datetime.min = '1776';
343+
datetime.calcMinMax(todaysDate);
344+
345+
expect(datetime._min.year).toEqual(1776);
346+
expect(datetime._max.year).toEqual(1994);
347+
});
348+
349+
it('should reset min.day when greater than max.day and the same year and month', () => {
350+
datetime.min = '1994-12-18T13:47:20.789Z';
351+
datetime.max = '1994-12-15T13:47:20.789Z';
352+
datetime.calcMinMax();
353+
354+
expect(datetime._min.year).toEqual(1994);
355+
expect(datetime._min.month).toEqual(12);
356+
expect(datetime._min.day).toEqual(1);
357+
expect(datetime._max.year).toEqual(1994);
358+
expect(datetime._max.month).toEqual(12);
359+
expect(datetime._max.day).toEqual(15);
360+
});
361+
362+
it('should reset min.month when greater than max.month and the same year', () => {
363+
datetime.min = '1994-12-15T13:47:20.789Z';
364+
datetime.max = '1994-10-15T13:47:20.789Z';
365+
datetime.calcMinMax();
366+
367+
expect(datetime._min.year).toEqual(1994);
368+
expect(datetime._min.month).toEqual(1);
369+
expect(datetime._max.year).toEqual(1994);
370+
expect(datetime._max.month).toEqual(10);
371+
});
372+
373+
it('should reset min.year when greater than max.year', () => {
374+
datetime.min = '1876';
375+
datetime.max = '1776';
376+
datetime.calcMinMax();
377+
378+
expect(datetime._min.year).toEqual(1676);
379+
expect(datetime._max.year).toEqual(1776);
380+
});
381+
382+
it('should set min date when max date far back in time, and only max set', () => {
383+
datetime.max = '1776';
384+
datetime.calcMinMax();
385+
386+
expect(datetime._min.year).toEqual(1676);
387+
expect(datetime._max.year).toEqual(1776);
388+
});
389+
258390
it('should max date from max input string', () => {
259391
datetime.max = '1994-12-15T13:47:20.789Z';
260392
datetime.calcMinMax();

0 commit comments

Comments
 (0)