javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): fix min/max displayFormat and pickerFormat

Browse Source 
Closes #8729
This commit is contained in:
Adam Bradley
2016-11-15 13:52:32 -06:00
parent 45fcf76e4d
commit c72b67d376
2 changed files with 152 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/datetime/datetime.ts
View File

@ -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';

132
src/components/datetime/test/datetime.spec.ts
View File

@ -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();