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
                        }
                      };
    }
  }
}