mdb-select and mdb-date-picker not binding

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

Vantage Data free asked 5 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' }, ];

}

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

<p>I tried to reproduce this problem but without success. Please try this code:</p>

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

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

<pre class="prettyprint"><code>    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);
  }
</code></pre>

Please insert min. 20 characters.

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);
  }

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Vantage Data

35Support score
5Questions 1Answers 0Snippets