Run the Following Command to create a new page in ionic project
ionic generate page datePicker
see the below image for reference.
Once the page is created, open the date-picker.ts file in date-picker folder.
Copy & Pase the Below code in your date-picker.ts file
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
/*
Generated class for the DatePicker page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-date-picker',
templateUrl: 'date-picker.html'
})
export class DatePickerPage {
event = { title:'',location:'',timeStarts: '',timeEnds: '',startDate:'',endDate:''}
eventList:any=[];
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad DatePickerPage');
}
saveData(event){
console.log("event",event)
this.eventList.push(event)
}
}
Copy & paste the below html code to date-picker.html
<!--
Generated template for the DatePicker page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>datePicker</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item class="customBorder">
<ion-input placeholder="Title" [(ngModel)]="event.title"></ion-input>
</ion-item>
<ion-item class="customBorder">
<ion-input placeholder="Location" [(ngModel)]="event.location"></ion-input>
</ion-item>
</ion-list>
<ion-list>
<ion-item class="customBorder">
<ion-label>Start Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.startDate"></ion-datetime>
</ion-item>
<ion-item class="customBorder">
<ion-label>Start Time</ion-label>
<ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</ion-item>
<ion-item class="customBorder">
<ion-label>End Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.endDate"></ion-datetime>
</ion-item>
<ion-item class="customBorder">
<ion-label>End Time</ion-label>
<ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeEnds"></ion-datetime>
</ion-item>
</ion-list>
<button ion-button full (click)="saveData(event)">Save</button>
<ion-list>
<div ion-item *ngFor="let item of eventList" (click)="itemSelected(item)" style="background-color: #dadada;">
<ion-card >
<ion-card-header>
{{item.title}}
</ion-card-header>
<ion-card-content>
{{item.location}}
</ion-card-content>
</ion-card>
<ion-row no-padding>
<ion-col>
<button ion-button clear small color="danger" icon-start>
Start Date:
{{item.startDate}}
</button>
</ion-col>
<ion-col text-center>
<button ion-button clear small color="danger" icon-start>
EndDate:
{{item.endDate}}
</button>
</ion-col>
</ion-row>
</div>
</ion-list>
</ion-content>
Copy & Pase the Below css in your date-picker.scss file
.customBorder{
border: 1px solid #7fabf7 !important;
margin-top: 5px;
}
after the application is finished building, your app date-picker page view will look as follows.
No comments:
Post a comment