1

I am using ng2-datepicker for available date and date expires. I was wondering if anyone knew how to set an initial value. Everything with the date picker works, I just want dateAvaliable to be today's date and then dateExpires to be 2099-12-31.

<label>Date Avaliable:</label>
<div>
  <ng2-datepicker name="dateAvaliable" [(ngModel)]="dateAvaliable" [ngModelOPtions]="{standalone: true}">  </ng2-datepicker>
</div>
<label>Date Expires:</label>
<div>
  <ng2-datepicker name="dateExpires" [(ngModel)]="dateExpires" [ngModelOPtions]="{standalone: true}">  </ng2-datepicker>
</div>

component

private today = new Date(); 
private dd: any  = this.today.getDate(); 
private mm: any = this.today.getMonth() +1; 
private year: any = this.today.getFullYear(); 


public sop: Sop;
public dateExpires: any; 

public dateAvaliable: any;

ngOnInit() {
    if (this.dd<10) {
       this.dd ='0'+this.dd; 
    }
    if(this.mm<10){
       this.mm='0'+this.mm;
    }
    this.sop = {
      description: "",
      country: [this.countrys[4].value],
      storeType: [this.storeTypes[4].value],
      scoType: [this.scoTypes[6].value],
      audience: [this.audiences[2].value],
      sopType: [this.sopTypes[2].value],
      dateAvaliable: this.year +'-'+this.mm+'-'+this.dd,
      dateExpires: "2099-12-31"
    }
}

this is my interface

export interface Sop {
    description: String; 
    country?: String[];
    storeType?: String[]; 
    scoType?: String[]; 
    audience?: String[]; 
    sopType?: String[];
    dateAvaliable: any; 
    dateExpires: any;
}
Roman C
  • 49,761
  • 33
  • 66
  • 176
Joshua Deshazer
  • 171
  • 3
  • 15

2 Answers2

1

You need to use [options] to set initial value

<ng2-datepicker name="dateExpires" [(ngModel)]="dateExpires" [options]="{maxDate: dateExpires}"></ng2-datepicker>

Initialize options

ngOnInit() {
   this.dateExpires = moment("2099-12-31");
}
Roman C
  • 49,761
  • 33
  • 66
  • 176
  • I can not access moment like this and I tried to import it but it does not have an export so I get an error on ngOnInit – Joshua Deshazer Jan 06 '17 at 01:41
  • You can use [this](http://stackoverflow.com/q/33938561/573032) question or [that](http://stackoverflow.com/q/35166168/573032). – Roman C Jan 06 '17 at 11:15
1

You can also use like below :

  1. You can import DatePickerOptions from ng2-datepicker

import { DatePickerOptions} from 'ng2-datepicker';

  1. then declare a variable : public dateOptions: DateOptions;

  2. and initialize it inside ngOnit : ngOnInit() {

    this.datepickerOptions = new DatePickerOptions({
        format: 'DD-MM-YYYY'
    });
    
  3. Use it in your HTML : < ng2-datepicker name="dateExpires" [options]="datepickerOptions ">

Mohit Jain
  • 351
  • 1
  • 9