feat(datetime): add ion-datetime

This commit is contained in:
Adam Bradley
2016-05-13 21:00:47 -05:00
parent af2085ed3d
commit 1e331c9ca0
21 changed files with 3374 additions and 425 deletions

View File

@@ -0,0 +1,8 @@
it('should open basic datetime picker', function() {
element(by.css('.e2eOpenMMDDYYYY')).click();
});
it('should close with Done button click', function() {
element(by.css('.picker-button:last-child')).click();
});

View File

@@ -0,0 +1,41 @@
import {App, Page} from '../../../../../ionic';
@Page({
templateUrl: 'main.html'
})
class E2EPage {
wwwInvented = '1989';
time = '13:47';
netscapeReleased = '1994-12-15T13:47:20.789';
operaReleased = '1995-04-15';
firefoxReleased = '2002-09-23T15:03:46.789';
webkitOpenSourced = '2005-06-17T11:06Z';
chromeReleased = '2008-09-02';
leapYearsSummerMonths = '';
leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
customShortDay = [
's\u00f8n',
'man',
'tir',
'ons',
'tor',
'fre',
'l\u00f8r'
];
}
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root;
constructor() {
this.root = E2EPage;
}
}

View File

@@ -0,0 +1,68 @@
<ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
<ion-content class="outer-content">
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MMMM YY</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MMM DD, YYYY</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MM/DD/YY (locale day)</ion-label>
<ion-datetime displayFormat="DDD. MM/DD/YY" min="1990-02" max="2000" [dayShortNames]="customShortDay" [(ngModel)]="operaReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
</ion-item>
<p aria-hidden="true" padding>
<code>wwwInvented: {{wwwInvented}}</code><br>
<code>netscapeReleased: {{netscapeReleased}}</code><br>
<code>operaReleased: {{operaReleased}}</code><br>
<code>firefoxReleased: {{firefoxReleased}}</code><br>
<code>webkitOpenSourced: {{webkitOpenSourced}}</code><br>
<code>chromeReleased: {{chromeReleased}}</code><br>
<code>time: {{time}}</code><br>
<code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
</p>
</ion-content>

View File

@@ -0,0 +1,518 @@
import {DateTime, Form, Picker, Config, NavController} from '../../../../ionic';
import * as datetime from '../../../../ionic/util/datetime-util';
export function run() {
describe('DateTime', () => {
describe('validate', () => {
it('should restrict January 1-14, 2000 from selection, then allow it, and restrict December 15-31, 2001', () => {
datetime.max = '2001-12-15';
datetime.min = '2000-01-15';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 0; // January
columns[1].selectedIndex = 0; // January 1st
columns[2].selectedIndex = 1; // January 1st, 2000
datetime.validate(picker);
expect(columns[1].options[0].disabled).toEqual(true);
expect(columns[1].options[13].disabled).toEqual(true);
expect(columns[1].options[14].disabled).toEqual(false);
columns[0].selectedIndex = 11; // December
columns[2].selectedIndex = 0; // December 1st, 2001
datetime.validate(picker);
expect(columns[0].options[11].disabled).toEqual(false);
expect(columns[1].options[14].disabled).toEqual(false);
expect(columns[1].options[15].disabled).toEqual(true);
expect(columns[1].options[30].disabled).toEqual(true);
});
it('should restrict January 2000 from selection, then allow it, and restrict December 2010', () => {
datetime.max = '2010-11-15';
datetime.min = '2000-02-15';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 1; // February
columns[1].selectedIndex = 0; // February 1st
columns[2].selectedIndex = columns[2].options.length - 1; // February 1st, 2000
datetime.validate(picker);
expect(columns[0].options[0].disabled).toEqual(true);
expect(columns[0].options[1].disabled).toEqual(false);
expect(columns[0].options[11].disabled).toEqual(false);
columns[2].selectedIndex = 0; // December 1st, 2010
datetime.validate(picker);
expect(columns[0].options[0].disabled).toEqual(false);
expect(columns[0].options[10].disabled).toEqual(false);
expect(columns[0].options[11].disabled).toEqual(true);
});
it('should only show 31 valid days in the selected 31 day month, then reset for 28 day, then to 30', () => {
datetime.max = '2010-12-31';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 0; // January
columns[1].selectedIndex = 0; // January 1st
columns[2].selectedIndex = 0; // January 1st, 2010
datetime.validate(picker);
for (var i = 0; i < 31; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
columns[0].selectedIndex = 1; // February
datetime.validate(picker);
for (var i = 0; i < 28; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
expect(columns[1].options[28].disabled).toEqual(true);
expect(columns[1].options[29].disabled).toEqual(true);
expect(columns[1].options[30].disabled).toEqual(true);
columns[0].selectedIndex = 3; // April
datetime.validate(picker);
for (var i = 0; i < 30; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
expect(columns[1].options[30].disabled).toEqual(true);
});
});
describe('generate', () => {
it('should generate with custom locale short month names from input property', () => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.pickerFormat = 'MMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(2);
expect(columns[0].name).toEqual('month');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('jan');
});
it('should generate with custom locale full month names from input property', () => {
datetime.monthNames = customLocale.monthNames;
datetime.ngAfterContentInit();
datetime.pickerFormat = 'MMMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(2);
expect(columns[0].name).toEqual('month');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('janeiro');
});
it('should replace a picker format with both a day name and a numeric day to use only the numeric day', () => {
datetime.pickerFormat = 'DDDD D M YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].name).toEqual('day');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('1');
});
it('should replace a picker format with only a day name to use a numeric day instead', () => {
datetime.pickerFormat = 'DDDD M YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].name).toEqual('day');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('1');
});
it('should generate MM DD YYYY pickerFormat with min/max', () => {
datetime.max = '2010-12-31';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].options.length).toEqual(12);
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[11].value).toEqual(12);
expect(columns[1].options.length).toEqual(31);
expect(columns[1].options[0].value).toEqual(1);
expect(columns[1].options[30].value).toEqual(31);
expect(columns[2].options.length).toEqual(11);
expect(columns[2].options[0].value).toEqual(2010);
expect(columns[2].options[10].value).toEqual(2000);
});
it('should generate YYYY pickerFormat with min/max', () => {
datetime.max = '2010-01-01';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(1);
expect(columns[0].options.length).toEqual(11);
expect(columns[0].options[0].value).toEqual(2010);
expect(columns[0].options[10].value).toEqual(2000);
});
});
describe('calcMinMax', () => {
it('should max date with no max input, but has yearValues input', () => {
datetime.yearValues = '2000,1996,1992';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(2000);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should min date with no min input, but has yearValues input', () => {
datetime.yearValues = '2000,1996,1992';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(1992);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
it('should min date with only YYYY', () => {
datetime.min = '1994';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(1994);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
it('should max date with only YYYY', () => {
datetime.max = '1994';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(1994);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should max date from max input string', () => {
datetime.max = '1994-12-15T13:47:20.789Z';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(1994);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(15);
expect(datetime._max.hour).toEqual(13);
expect(datetime._max.minute).toEqual(47);
expect(datetime._max.second).toEqual(20);
expect(datetime._max.millisecond).toEqual(789);
});
it('should min date from max input string', () => {
datetime.min = '0123-01-05T00:05:00.009Z';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(123);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(5);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(5);
expect(datetime._min.second).toEqual(0);
expect(datetime._min.millisecond).toEqual(9);
});
it('should default max date when not set', () => {
datetime.calcMinMax();
expect(datetime._max.year).toEqual(new Date().getFullYear());
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should default min date when not set', () => {
datetime.calcMinMax();
expect(datetime._min.year).toEqual(new Date().getFullYear() - 100);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
});
describe('setValue', () => {
it('should update existing time value with 12-hour PM DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
var dateTimeData = {
hour: {
text: '12',
value: 12,
},
minute: {
text: '09',
value: 9,
},
ampm: {
text: 'pm',
value: 'pm',
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(12);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
dateTimeData.hour.value = 1;
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing time value with 12-hour AM DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
var dateTimeData = {
hour: {
text: '12',
value: 12,
},
minute: {
text: '09',
value: 9,
},
ampm: {
text: 'am',
value: 'am',
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(0);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
dateTimeData.hour.value = 11;
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(11);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing time value with new DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(47);
expect(datetime.getValue().second).toEqual(20);
var dateTimeData = {
hour: {
text: '15',
value: 15,
},
minute: {
text: '09',
value: 9,
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().year).toEqual(null);
expect(datetime.getValue().month).toEqual(null);
expect(datetime.getValue().day).toEqual(null);
expect(datetime.getValue().hour).toEqual(15);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing DateTimeData value with new DateTimeData value', () => {
var d = '1994-12-15T13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().year).toEqual(1994);
var dateTimeData = {
year: {
text: '1995',
value: 1995,
},
month: {
text: 'December',
value: 12,
},
day: {
text: '20',
value: 20
},
whatevaIDoWhatIWant: -99,
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().year).toEqual(1995);
expect(datetime.getValue().month).toEqual(12);
expect(datetime.getValue().day).toEqual(20);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(47);
});
it('should parse a ISO date string with no existing DateTimeData value', () => {
var d = '1994-12-15T13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().year).toEqual(1994);
expect(datetime.getValue().month).toEqual(12);
expect(datetime.getValue().day).toEqual(15);
});
it('should not parse a Date object', () => {
var d = new Date(1994, 11, 15);
datetime.setValue(d);
expect(datetime.getValue()).toEqual({});
});
it('should not parse a value with bad data', () => {
var d = 'umm 1994 i think';
datetime.setValue(d);
expect(datetime.getValue()).toEqual({});
});
it('should not parse a value with blank value', () => {
datetime.setValue(null);
expect(datetime.getValue()).toEqual({});
datetime.setValue(undefined);
expect(datetime.getValue()).toEqual({});
datetime.setValue('');
expect(datetime.getValue()).toEqual({});
});
});
var datetime: DateTime;
beforeEach(() => {
datetime = new DateTime(new Form(), new Config(), null, <NavController>{});
});
console.warn = function(){};
// pt-br
var customLocale: datetime.LocaleData = {
dayShort: [
'domingo',
'segunda-feira',
'ter\u00e7a-feira',
'quarta-feira',
'quinta-feira',
'sexta-feira',
's\u00e1bado'
],
dayShortNames: [
'dom',
'seg',
'ter',
'qua',
'qui',
'sex',
's\u00e1b'
],
monthNames: [
'janeiro',
'fevereiro',
'mar\u00e7o',
'abril',
'maio',
'junho',
'julho',
'agosto',
'setembro',
'outubro',
'novembro',
'dezembro'
],
monthShortNames: [
'jan',
'fev',
'mar',
'abr',
'mai',
'jun',
'jul',
'ago',
'set',
'out',
'nov',
'dez'
],
};
});
}