Skip to content

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 } }; } } }
Clone this wiki locally