mdb-select and mdb-date-picker not binding


Topic: mdb-select and mdb-date-picker not binding

Vantage Data asked 6 years ago

Expected behavior*Hi, I have implemented a simple dropdown list and a DatePicker. When selecting a date or value, mdb is failing to bind it to the specified variable in typescript.*Actual behavior

Resources (screenshots, code snippets etc.)

Here is the html code:

                    <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="''" label="Date Due" [(ngModel)]="selectedDate"  required>
                    </mdb-date-picker>
                  </div>

Here is the typescript code:

selectedDate: Date;client = { id: 0, Description: ''default" };

ngOnInit() {

this.clientList =[ { value: '1', label: 'Ilunga' }, { value: '2', label: 'Kabongo' }, { value: '3', label: 'Mujinga' }, ];

}


Arkadiusz Idzikowski staff answered 6 years ago

I tried to reproduce this problem but without success. Please try this code:

HTML

<mdb-date-picker
  name="mydate"
  [options]="myDatePickerOptions"
  [placeholder]="'Selected date'"
  [(ngModel)]="selectedDate"
></mdb-date-picker>

<mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>

<button mdbBtn color="primary" (click)="showSelectedValues()">Show selected values</button>

TS:

    public myDatePickerOptions: IMyOptions = {
      };

    dateOptionsSelect = [
      { value: '1', label: 'Today', selected: true },
      { value: '2', label: 'Yesterday' },
      { value: '3', label: 'Last 7 days' },
      { value: '4', label: 'Last 30 days' },
      { value: '5', label: 'Last week' },
      { value: '6', label: 'Last month' }
    ];
    selectedValue = '1';

  showSelectedValues() {
    console.log('date picker', this.selectedDate);
    console.log('select', this.selectedValue);
  }

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: Laptop
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No