-
Notifications
You must be signed in to change notification settings - Fork 11
initialize date model (date range mode)
Keke edited this page Jul 12, 2019
·
2 revisions
This example shows on how to initialize date model in date range selection mode.
<div class="input-box-container">
<input class="input-box" placeholder="Click to select a date"
angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()"
[(ngModel)]="model" [options]="myDpOptions"
#dp="angular-mydatepicker"/>
</div>
import {IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
// other imports are here...
export class MyTestApp {
myDpOptions: IAngularMyDpOptions = {
dateRange: true,
dateFormat: 'dd.mm.yyyy'
// other options are here...
};
myDateInit: boolean = true;
model: IMyDateModel = null;
constructor() { }
ngOnInit() {
if (myDateInit) {
// Initialize to specific date range with IMyDate object.
// Begin date = today. End date = today + 3.
let begin: Date = new Date();
let end: Date = new Date();
end.setDate(end.getDate() + 3);
this.model = {
isRange: true,
singleDate: null,
dateRange: {
beginDate: {
year: begin.getFullYear(), month: begin.getMonth() + 1, day: begin.getDate()
},
endDate: {
year: end.getFullYear(), month: end.getMonth() + 1, day: end.getDate()
}
}
};
}
else {
// Initialize to specific date range with a javascript date object.
// Begin date = today. End date = today + 3.
let begin: Date = new Date();
let end: Date = new Date();
end.setDate(end.getDate() + 3);
this.model = {
isRange: true,
singleDate: null,
dateRange: {
beginJsDate: begin,
endJsDate: end
}
};
}
}
}
![](https://github.com/kekeh/angular-mydatepicker/raw/gh-pages/.images/wiki-footer-img.png)