DatTimePicker "change" event not firing

[davout]

In my Angular app I am trying to capture the value of  a new DateTimePicker value after it has been selected using the ‘(change)’ event
Like…

<smart-date-time-picker
  *ngIf="isInlineEditing(rowIndex + '-scheduled')"
  formatString="ddd dd-MMM-yyyy"
  dropDownDisplayMode="calendar"
  drop-down-position="bottom"
  calendar-button placeholder="for"
  style="width: 180px"
  [nullable]="true"
  [autoClose]="true"
  [value]="value"
  [dropDownAppendTo]="'body'"
  (change)="updateScheduledValue($event)"
>
...  but when I select a new date from the drop down the change event is not being fired

 

[admin]

Hi davout,
We use this for testing:

<smart-date-time-picker
  (change)="change($event)"
  #datetimepicker
  [calendarButton]="true"
  [enableMouseWheelAction]="true"
  [dropDownPosition]="'center-bottom'"
  [spinButtons]="true"
  [spinButtonsPosition]="'left'"
></smart-date-time-picker>

app.component.html

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DateTimePickerComponent } from '@smart-webcomponents-angular/datetimepicker';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent;
	
  change(event): void {
    console.log(event.detail.value);
  }
  
	ngOnInit(): void {
		// onInit code.
	}
	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    
	}	
}

The reported behavior cannot be reproduced. Please, share a Stackblitz sample showing incorrect behavior and instructions how to reproduce it.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

I’ve noticed that I have to select the new date value twice before the ‘change’ event is triggered
The date time picker is inside a template that is used for table cell editing

<ng-template #scheduledDateTemplate let-row="row" let-rowIndex="rowIndex" let-value="value">
          <span
            (click)="startInlineEdit(rowIndex + '-scheduled', rowIndex)"
            *ngIf="!isInlineEditing(rowIndex + '-scheduled')"
            title="Click to edit"
          >
            {{ value }}
          </span>
  <smart-date-time-picker
    *ngIf="isInlineEditing(rowIndex + '-scheduled')"
    formatString="ddd dd-MMM-yyyy"
    dropDownDisplayMode="calendar"
    drop-down-position="bottom"
    calendar-button placeholder="for"
    style="width: 180px"
    [nullable]="true"
    [autoClose]="true"
    [value]="value"
    [dropDownAppendTo]="'body'"
    (change)="updateScheduledValue($event)"
  >
  </smart-date-time-picker>
</ng-template>

[admin]

Hi davout,
we will need a full stackblitz.com sample. Unfortunately, the provided information is insufficient for reproduction of an issue with our angular datetimepicker.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

I’ve managed to solve it by pointing the datetimepicker at a component class value, not the table cell value pushed to it by the template
#

[Author]

Posts