Skip to content

Commit

Permalink
fix(datetime): fix min/max displayFormat and pickerFormat
Browse files Browse the repository at this point in the history 
Closes #8729
  • Loading branch information
@adamdbradley
adamdbradley committed Nov 15, 2016
1 parent 45fcf76 commit c72b67d
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 7 deletions.
27 changes: 20 additions & 7 deletions src/components/datetime/datetime.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)) {
Expand All @@ -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;
Expand Down Expand Up @@ -915,3 +926,5 @@ function convertToArrayOfStrings(input: any, type: string): string[] {
return values;
}
}

const DEFAULT_FORMAT = 'MMM D, YYYY';
132 changes: 132 additions & 0 deletions src/components/datetime/test/datetime.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit c72b67d

Please sign in to comment.