Topic: Changing mdb-date-picker options at run time

itay pro asked 4 years ago


I'm trying to change options field 'disableUntil' at run time Although option is updated while checking with Augury, disabled dates are not marked. Setting disableUntil while setting the options initially does work What should I do ?

Arkadiusz Idzikowski staff answered 4 years ago


Dear mdb2, I tried to recreate this problem but with no success. Maybe if you provide code sample I will be able to spot the problem. Best, Arek

itay pro commented 4 years ago

I sent you a demo

Arkadiusz Idzikowski staff commented 4 years ago

Thanks for the example code. You didn't call the 'updateDatePicker()' function in ngOnInit. After this change it should work correctly. You should also specify IMyOptions type for options object. If you will have further problem with changing options please try to overwrite whole myDatePickerOptions object insted of setting it's specific parameter - it should trigger Angular change detection. Best, Arek

itay pro commented 4 years ago

Sorry, I don't understand what to do updateDatePicker() is called on runtime by clicking on the button, not on ngOnInit(). What is IMyOptions ? Is it working for you ? Can you share the working code ?

Arkadiusz Idzikowski staff commented 4 years ago

Import ImyOptions import { IMyOptions } from 'ng-uikit-pro-standard'; Add ImyOptions type to myDatePickerOptions myDatePickerOptions: IMyOptions = {}; and change your updateDatePicker function code to: this.myDatePickerOptions = { disableUntil: { year: 2018, month: 7, day: 15 } // Disable dates backward starting from the given date. }

itay pro commented 4 years ago

Much better ! However, when I set myDatePickerOptions as suggested, all other settings, such as localization are lost. this.myDatePickerOptions = { disableUntil: { year: 2018, month: 7, day: 15 } // Disable dates backward starting from the given date. } Setting only the disableUntil doesn't affect the component at all this.myDatePickerOptions.disableUntil = { year: 2018, month: 7, day: 10 }; What should I do to preserve other settings ?

Arkadiusz Idzikowski staff commented 4 years ago

Try something like this: updateDatePicker() { this.myDatePickerOptions.disableUntil = { year: 2018, month: 7, day: 15 }; // Disable dates backward starting from the given date. this.myDatePickerOptions = {...this.myDatePickerOptions} } It should trigger change detection without overwriting your other options.

itay pro commented 4 years ago

Excellent !

wilkier free commented 2 years ago

This works for me, try this: // ref to your datePicker -----------> @ViewChild('datePicker', { static: true }) datePicker: MDBDatePickerComponent;

// code to update values ---------->this.datePicker.opts.disableUntil = {year:2020, month:04, day : 08}



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags