InfomediaLtd/angular2-materialize

Unable to reload materializeParams

Opened this issue · 1 comments

I've already looked at #393, #280, #279 and #127 but I'm still unable to get this to work. I've seen multiple solutions in these posts such as using ngIf to reload it etc. but this doesn't work for me either. My use case is the following.

I Have two dates from and to. from's max value is to's current value, to's min value is from's current value. When I first set the default dates it works fine, but when I change one of them it just keeps the original options

HTML

<div class="input-field col s6">
    <input id="from"
           type="text"
           [ngModel]="from"
           materialize="pickadate"
           [materializeParams]="[fromOptions]"
           class="datepicker">
    <label class="active" for="from">From</label>
</div>
<div class="input-field col s6">
    <input id="to"
           type="text"
           [ngModel]="to"
           materialize="pickadate"
           [materializeParams]="[toOptions]"
           class="datepicker">
    <label class="active" for="to">To</label>
</div>

Typescript

export class ProjectOverviewComponent implements OnInit {
    from: Date;
    to: Date;

    fromOptions: any;
    toOptions: any;

    constructor() {
    }

    ngOnInit() {
        this.to = new Date();
        this.from = new Date();
        this.from.setDate(this.to.getDate() - 30);

        this.fromOptions = {
            format: 'yyyy-mm-dd',
            max: this.to,
            formatSubmit: 'yyyy-MM-dd',
            firstDay: 'Monday',
            clear: false
        };
        this.toOptions = {
            format: 'yyyy-mm-dd',
            min: this.from,
            max: new Date(),
            formatSubmit: 'yyyy-MM-dd',
            firstDay: 'Monday',
            clear: false
        };
    }
}

The thing I've tried so far are:

  • altering a state with ngIf
  • using ngModelChange
  • assigning a new object to the from/to options
  • Emitting Actions (but as stated in a other post, this doesn't work)

Is there a, preferably not a hacky, solution for this problem?

spdi commented

I'm using this:

//in import section
declare var $ :any;

//in class declaration
@ViewChild('dateInputFrom')  dateInputFrom;
//using in method
$(this.dateInputFrom.nativeElement).pickadate('picker').set('min',new Date());

//in template
<input type="text" class="datepicker" #dateInputFrom formControlName="..." materialize="pickadate" [materializeParams]="[datePickerFromParams]">


corespond to:
http://amsul.ca/pickadate.js/api/#method-set-max