Skip to content

Commit 1e331c9

Browse files
adamdbradleyadamdbradley
committed
feat(datetime): add ion-datetime
1 parent af2085e commit 1e331c9

21 files changed

+3333
-384
lines changed

‎ionic/components.ios.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"components/checkbox/checkbox.ios",
1515
"components/chip/chip.ios",
1616
"components/content/content.ios",
17+
"components/datetime/datetime.ios",
1718
"components/input/input.ios",
1819
"components/item/item.ios",
1920
"components/label/label.ios",

‎ionic/components.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export * from './components/badge/badge';
55
export * from './components/button/button';
66
export * from './components/checkbox/checkbox';
77
export * from './components/content/content';
8+
export * from './components/datetime/datetime';
89
export * from './components/icon/icon';
910
export * from './components/img/img';
1011
export * from './components/infinite-scroll/infinite-scroll';

‎ionic/components/datetime/datetime.ios.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import "../../globals.ios";
2+
@import "./datetime";
3+
4+
// iOS DateTime
5+
// --------------------------------------------------
6+
7+
$datetime-ios-padding-top: $item-ios-padding-top !default;
8+
$datetime-ios-padding-right: ($item-ios-padding-right / 2) !default;
9+
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
10+
$datetime-ios-padding-left: $item-ios-padding-left !default;
11+
12+
13+
ion-datetime {
14+
padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
15+
}

‎ionic/components/datetime/datetime.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import "../../globals.core";
2+
3+
// DateTime
4+
// --------------------------------------------------
5+
6+
ion-datetime {
7+
display: flex;
8+
overflow: hidden;
9+
10+
max-width: 45%;
11+
}
12+
13+
.datetime-text {
14+
overflow: hidden;
15+
16+
flex: 1;
17+
18+
min-width: 16px;
19+
20+
font-size: inherit;
21+
text-overflow: ellipsis;
22+
white-space: nowrap;
23+
}
24+
25+
.datetime-disabled,
26+
.item-datetime-disabled ion-label {
27+
opacity: .4;
28+
29+
pointer-events: none;
30+
}

‎ionic/components/datetime/datetime.ts

Lines changed: 888 additions & 0 deletions
Large diffs are not rendered by default.

‎ionic/components/datetime/test/basic/e2e.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
it('should open basic datetime picker', function() {
3+
element(by.css('.e2eOpenMMDDYYYY')).click();
4+
});
5+
6+
it('should close with Done button click', function() {
7+
element(by.css('.picker-button:last-child')).click();
8+
});

‎ionic/components/datetime/test/basic/index.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {App, Page} from '../../../../../ionic';
2+
3+
4+
@Page({
5+
templateUrl: 'main.html'
6+
})
7+
class E2EPage {
8+
wwwInvented = '1989';
9+
time = '13:47';
10+
netscapeReleased = '1994-12-15T13:47:20.789';
11+
operaReleased = '1995-04-15';
12+
firefoxReleased = '2002-09-23T15:03:46.789';
13+
webkitOpenSourced = '2005-06-17T11:06Z';
14+
chromeReleased = '2008-09-02';
15+
leapYearsSummerMonths = '';
16+
17+
leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
18+
19+
customShortDay = [
20+
's\u00f8n',
21+
'man',
22+
'tir',
23+
'ons',
24+
'tor',
25+
'fre',
26+
'l\u00f8r'
27+
];
28+
29+
}
30+
31+
32+
@App({
33+
template: '<ion-nav [root]="root"></ion-nav>'
34+
})
35+
class E2EApp {
36+
root;
37+
38+
constructor() {
39+
this.root = E2EPage;
40+
}
41+
}

‎ionic/components/datetime/test/basic/main.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<ion-toolbar>
2+
<ion-title>Datetime</ion-title>
3+
</ion-toolbar>
4+
5+
<ion-content class="outer-content">
6+
7+
<ion-item>
8+
<ion-label>YYYY</ion-label>
9+
<ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label>MMMM YY</ion-label>
14+
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></ion-datetime>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label>MMM DD, YYYY</ion-label>
19+
<ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased" class="e2eOpenMMDDYYYY"></ion-datetime>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>DDD. MM/DD/YY (locale day)</ion-label>
24+
<ion-datetime displayFormat="DDD. MM/DD/YY" min="1990-02" max="2000" [dayShortNames]="customShortDay" [(ngModel)]="operaReleased"></ion-datetime>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-label>D MMM YYYY H:mm</ion-label>
29+
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
30+
</ion-item>
31+
32+
<ion-item>
33+
<ion-label>DDDD MMM D, YYYY</ion-label>
34+
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
35+
</ion-item>
36+
37+
<ion-item>
38+
<ion-label>HH:mm</ion-label>
39+
<ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
40+
</ion-item>
41+
42+
<ion-item>
43+
<ion-label>h:mm a</ion-label>
44+
<ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
45+
</ion-item>
46+
47+
<ion-item>
48+
<ion-label>hh:mm A (15 min steps)</ion-label>
49+
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
50+
</ion-item>
51+
52+
<ion-item>
53+
<ion-label>Leap years, summer months</ion-label>
54+
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
55+
</ion-item>
56+
57+
<p aria-hidden="true" padding>
58+
<code>wwwInvented: {{wwwInvented}}</code><br>
59+
<code>netscapeReleased: {{netscapeReleased}}</code><br>
60+
<code>operaReleased: {{operaReleased}}</code><br>
61+
<code>firefoxReleased: {{firefoxReleased}}</code><br>
62+
<code>webkitOpenSourced: {{webkitOpenSourced}}</code><br>
63+
<code>chromeReleased: {{chromeReleased}}</code><br>
64+
<code>time: {{time}}</code><br>
65+
<code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
66+
</p>
67+
68+
</ion-content>

0 commit comments

Comments
 (0)