InfomediaLtd / angular2-materialize

Angular 2 support for Materialize CSS framework.
https://infomedialtd.github.io/angular2-materialize/
MIT License
406 stars 139 forks source link

Unable to reload materializeParams #398

Open GlennVanSchil opened 6 years ago

GlennVanSchil commented 6 years ago

I've already looked at https://github.com/InfomediaLtd/angular2-materialize/issues/393, https://github.com/InfomediaLtd/angular2-materialize/issues/280, https://github.com/InfomediaLtd/angular2-materialize/issues/279 and https://github.com/InfomediaLtd/angular2-materialize/issues/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:

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

spdi commented 6 years ago

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