From c72b67d376ba2dcdc1b23f19aa3ba8f0938db425 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 15 Nov 2016 13:52:32 -0600 Subject: [PATCH] fix(datetime): fix min/max displayFormat and pickerFormat Closes #8729 --- src/components/datetime/datetime.ts | 27 +++- src/components/datetime/test/datetime.spec.ts | 132 ++++++++++++++++++ 2 files changed, 152 insertions(+), 7 deletions(-) diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index ca5a8832881..a968ff64750 100644 --- a/src/components/datetime/datetime.ts +++ b/src/components/datetime/datetime.ts @@ -309,7 +309,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces * the datetime picker's columns. See the `pickerFormat` input description for * more info. Defaults to `MMM D, YYYY`. */ - @Input() displayFormat: string = 'MMM D, YYYY'; + @Input() displayFormat: string; /** * @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 generate(picker: Picker) { // if a picker format wasn't provided, then fallback // to use the display format - let template = this.pickerFormat || this.displayFormat; + let template = this.pickerFormat || this.displayFormat || DEFAULT_FORMAT; if (isPresent(template)) { // make sure we've got up to date sizing information @@ -724,14 +724,15 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces */ updateText() { // create the text of the formatted data - this._text = renderDateTime(this.displayFormat, this._value, this._locale); + const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT; + this._text = renderDateTime(template, this._value, this._locale); } /** * @private */ - calcMinMax() { - let todaysYear = new Date().getFullYear(); + calcMinMax(now?: Date) { + const todaysYear = (now || new Date()).getFullYear(); if (isBlank(this.min)) { if (isPresent(this.yearValues)) { @@ -751,8 +752,18 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces } } - let min = this._min = parseDate(this.min); - let max = this._max = parseDate(this.max); + const min = this._min = parseDate(this.min); + const max = this._max = parseDate(this.max); + + if (min.year > max.year) { + min.year = this._min.year = (max.year - 100); + } else if (min.year === max.year) { + if (min.month > max.month) { + min.month = this._min.month = 1; + } else if (min.month === max.month && min.day > max.day) { + min.day = this._min.day = 1; + } + } min.month = min.month || 1; min.day = min.day || 1; @@ -915,3 +926,5 @@ function convertToArrayOfStrings(input: any, type: string): string[] { return values; } } + +const DEFAULT_FORMAT = 'MMM D, YYYY'; diff --git a/src/components/datetime/test/datetime.spec.ts b/src/components/datetime/test/datetime.spec.ts index 696adaef731..13894b4621b 100644 --- a/src/components/datetime/test/datetime.spec.ts +++ b/src/components/datetime/test/datetime.spec.ts @@ -107,8 +107,78 @@ describe('DateTime', () => { }); + describe('writeValue', () => { + + it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', () => { + datetime.ngAfterContentInit(); + datetime.writeValue('1994-12-15T13:47:20.789Z'); + + expect(datetime._text).toEqual('Dec 15, 1994'); + }); + + it('should updateText with pickerFormat when no displayFormat', () => { + datetime.pickerFormat = 'YYYY'; + datetime.ngAfterContentInit(); + datetime.writeValue('1994-12-15T13:47:20.789Z'); + + expect(datetime._text).toEqual('1994'); + }); + + it('should updateText with displayFormat when no pickerFormat', () => { + datetime.displayFormat = 'YYYY'; + datetime.ngAfterContentInit(); + datetime.writeValue('1994-12-15T13:47:20.789Z'); + + expect(datetime._text).toEqual('1994'); + }); + + }); + describe('generate', () => { + it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', () => { + datetime.monthShortNames = customLocale.monthShortNames; + datetime.ngAfterContentInit(); + datetime.setValue('1994-12-15T13:47:20.789Z'); + + var picker = new Picker(mockApp()); + datetime.generate(picker); + var columns = picker.getColumns(); + + expect(columns.length).toEqual(3); + expect(columns[0].name).toEqual('month'); + expect(columns[1].name).toEqual('day'); + expect(columns[2].name).toEqual('year'); + }); + + it('should generate with only displayFormat', () => { + datetime.monthShortNames = customLocale.monthShortNames; + datetime.ngAfterContentInit(); + datetime.displayFormat = 'YYYY'; + datetime.setValue('1994-12-15T13:47:20.789Z'); + + var picker = new Picker(mockApp()); + datetime.generate(picker); + var columns = picker.getColumns(); + + expect(columns.length).toEqual(1); + expect(columns[0].name).toEqual('year'); + }); + + it('should generate with only pickerFormat', () => { + datetime.monthShortNames = customLocale.monthShortNames; + datetime.ngAfterContentInit(); + datetime.pickerFormat = 'YYYY'; + datetime.setValue('1994-12-15T13:47:20.789Z'); + + var picker = new Picker(mockApp()); + datetime.generate(picker); + var columns = picker.getColumns(); + + expect(columns.length).toEqual(1); + expect(columns[0].name).toEqual('year'); + }); + it('should generate with custom locale short month names from input property', () => { datetime.monthShortNames = customLocale.monthShortNames; datetime.ngAfterContentInit(); @@ -255,6 +325,68 @@ describe('DateTime', () => { expect(datetime._max.second).toEqual(59); }); + it('should set max and min date when neither set', () => { + const todaysDate = new Date(); + todaysDate.setFullYear(1994); + + datetime.calcMinMax(todaysDate); + + expect(datetime._min.year).toEqual(1894); + expect(datetime._max.year).toEqual(1994); + }); + + it('should set max date when min date far back in time, and only min set', () => { + const todaysDate = new Date(); + todaysDate.setFullYear(1994); + + datetime.min = '1776'; + datetime.calcMinMax(todaysDate); + + expect(datetime._min.year).toEqual(1776); + expect(datetime._max.year).toEqual(1994); + }); + + it('should reset min.day when greater than max.day and the same year and month', () => { + datetime.min = '1994-12-18T13:47:20.789Z'; + datetime.max = '1994-12-15T13:47:20.789Z'; + datetime.calcMinMax(); + + expect(datetime._min.year).toEqual(1994); + expect(datetime._min.month).toEqual(12); + expect(datetime._min.day).toEqual(1); + expect(datetime._max.year).toEqual(1994); + expect(datetime._max.month).toEqual(12); + expect(datetime._max.day).toEqual(15); + }); + + it('should reset min.month when greater than max.month and the same year', () => { + datetime.min = '1994-12-15T13:47:20.789Z'; + datetime.max = '1994-10-15T13:47:20.789Z'; + datetime.calcMinMax(); + + expect(datetime._min.year).toEqual(1994); + expect(datetime._min.month).toEqual(1); + expect(datetime._max.year).toEqual(1994); + expect(datetime._max.month).toEqual(10); + }); + + it('should reset min.year when greater than max.year', () => { + datetime.min = '1876'; + datetime.max = '1776'; + datetime.calcMinMax(); + + expect(datetime._min.year).toEqual(1676); + expect(datetime._max.year).toEqual(1776); + }); + + it('should set min date when max date far back in time, and only max set', () => { + datetime.max = '1776'; + datetime.calcMinMax(); + + expect(datetime._min.year).toEqual(1676); + expect(datetime._max.year).toEqual(1776); + }); + it('should max date from max input string', () => { datetime.max = '1994-12-15T13:47:20.789Z'; datetime.calcMinMax();