Tuesday, January 16, 2018

Reset a mydatepicker control from an Angular 4 application.

  1. Make a local reference for the control in your template and then map it to an ElementRef in your corresponding component with the ViewChild trick so that if #myDay were your local reference (put this inline inside of the my-date-picker tag) then in turn @ViewChild('myDay') myDay: ElementRef; would go somewhere inside of component itself to ensure the mapping of the control to a manhandlable variable that you may... manhandle.
  2. Figure out how you want to reset the control, perhaps upon the click of a button, and then make a method in your component for the act, you will first need this line of code.
    this.myDay.selectionDayTxt = "";
    This wipes the obvious visual setting. WebStorm 2017.1 puts a squiggly red line under this line of code indicating that it can't compile. The way around this is to make the ElementRef an any instead.
  3. Immediately following the line of code in step two above you will want to run the lines of code you run at your template in the dateChanged event for the mydatepicker which in this example are like:
    this.someDate = new Date(1753,0,1);
    this.doSomething();

No comments:

Post a Comment