mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
feat(demo): add datetimePicker testing
This commit is contained in:
@ -100,11 +100,11 @@ describe('Basic Inputs Page', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('select input', () => {
|
||||
describe('date time picker', () => {
|
||||
it('should be set the initial value', () => {
|
||||
page.navigateTo();
|
||||
const el = page.getIonicSelect();
|
||||
expect(el.getAttribute('value')).toEqual('brains');
|
||||
const el = page.getIonicDatetime();
|
||||
expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -13,12 +13,12 @@ export class BasicInputsPage {
|
||||
return element(by.id('checkboxOutput')).getText();
|
||||
}
|
||||
|
||||
getIonicSelect() {
|
||||
return element(by.id('ionSelect'));
|
||||
getIonicDatetime() {
|
||||
return element(by.id('ionDatetimeInput'));
|
||||
}
|
||||
|
||||
getSelectOutput() {
|
||||
return element(by.id('selectOutput')).getText();
|
||||
getDatetimeOutput() {
|
||||
return element(by.id('datetimeOutput')).getText();
|
||||
}
|
||||
|
||||
getIonicToggle() {
|
||||
|
||||
@ -100,4 +100,12 @@ describe('Group Inputs Page', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('select input', () => {
|
||||
it('should be set the initial value', () => {
|
||||
page.navigateTo();
|
||||
const el = page.getIonicSelect();
|
||||
expect(el.getAttribute('value')).toEqual('brains');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -50,4 +50,12 @@ export class GroupInputsPage {
|
||||
getRadioOutputText() {
|
||||
return element(by.id('radioOutput')).getText();
|
||||
}
|
||||
|
||||
getIonicSelect() {
|
||||
return element(by.id('ionSelect'));
|
||||
}
|
||||
|
||||
getSelectOutput() {
|
||||
return element(by.id('selectOutput')).getText();
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,44 +82,6 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<h2>Select</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label for="stdSelect">Standard Select (for tacos)</label>
|
||||
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
|
||||
<option value="beef">Carne Asada</option>
|
||||
<option value="tongue">Lengua</option>
|
||||
<option value="brains">Sesos</option>
|
||||
<option value="tripe">Tripa</option>
|
||||
<option value="chicken">Pollo</option>
|
||||
</select>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
Value:
|
||||
<span id="selectOutput">{{selectValue}}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label>Ionic Select (for tacos)</ion-label>
|
||||
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
|
||||
<ion-select-option value="beef">Carne Asada</ion-select-option>
|
||||
<ion-select-option value="tongue">Lengua</ion-select-option>
|
||||
<ion-select-option value="brains">Sesos</ion-select-option>
|
||||
<ion-select-option value="tripe">Tripa</ion-select-option>
|
||||
<ion-select-option value="chicken">Pollo</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<h2>Toggle</h2>
|
||||
@ -145,6 +107,32 @@
|
||||
<ion-col>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<h2>Date Time Picker</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label for="stdToggle">ISO Formatted Date</label>
|
||||
<input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" />
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
Value:
|
||||
<span id="datetimeOutput">{{datetimeValue}}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label>Ionic Date</ion-label>
|
||||
<ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput" [(ngModel)]="datetimeValue"></ion-datetime>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<a href='home'>Home</a>
|
||||
|
||||
@ -7,14 +7,13 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class BasicInputsPageComponent implements OnInit {
|
||||
datetimeValue = '2017-11-18T14:17:45-06:00';
|
||||
textareaValue = 'This is the Textarea Input';
|
||||
textValue = 'This is the Text Input';
|
||||
|
||||
checkboxValue = true;
|
||||
toggleValue = false;
|
||||
|
||||
selectValue = 'brains';
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
@ -116,5 +116,43 @@
|
||||
<ion-col></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<h2>Select</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label for="stdSelect">Standard Select (for tacos)</label>
|
||||
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue">
|
||||
<option value="beef">Carne Asada</option>
|
||||
<option value="tongue">Lengua</option>
|
||||
<option value="brains">Sesos</option>
|
||||
<option value="tripe">Tripa</option>
|
||||
<option value="chicken">Pollo</option>
|
||||
</select>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
Value:
|
||||
<span id="selectOutput">{{selectValue}}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label>Ionic Select (for tacos)</ion-label>
|
||||
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue">
|
||||
<ion-select-option value="beef">Carne Asada</ion-select-option>
|
||||
<ion-select-option value="tongue">Lengua</ion-select-option>
|
||||
<ion-select-option value="brains">Sesos</ion-select-option>
|
||||
<ion-select-option value="tripe">Tripa</ion-select-option>
|
||||
<ion-select-option value="chicken">Pollo</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-grid>
|
||||
<a href='home'>Home</a>
|
||||
|
||||
@ -8,6 +8,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
})
|
||||
export class GroupInputsPageComponent implements OnInit {
|
||||
radioValue = 'tripe';
|
||||
selectValue = 'brains';
|
||||
|
||||
constructor() {}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
|
||||
@Directive({
|
||||
/* tslint:disable-next-line:directive-selector */
|
||||
selector: 'ion-select, ion-radio-group, ion-segment',
|
||||
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
|
||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
|
||||
})
|
||||
export class IonSelectValueAccessorDirective implements ControlValueAccessor {
|
||||
|
||||
Reference in New Issue
Block a user