Wijmo 5, ANgular CLI 1.6.5 - InputDate change icon

Wijmo 5, ANgular CLI 1.6.5 - InputDate change icon

Posted by: feniksreborn on 28 January 2018, 8:52 pm EST

• 

  feniksreborn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 January 2018, 8:52 pm EST

  Hello everybody,

  I would like to change an icon in date picker? Is this possible and what is the best practice to achieve this? Font awesome has good icons, maybe I would like to use calendar icon…
  
  Can you give me an example?

  I am using ANgular CLI 1.6.5 and Wijmo 5 version 5.20172.359.

  Thank you

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 28 January 2018, 11:42 pm EST

  The icon is displayed using the custom .wj-glyph-down class. You will need to remove this element and add a custom class to acomplish this. Please see the fiddle given below

  
  $scope.init = function(s, e) {
  		
      s.hostElement.querySelector('.wj-glyph-down').classList.add('fa');
      s.hostElement.querySelector('.wj-glyph-down').classList.add('fa-address-book-o');
      s.hostElement.querySelector('.wj-glyph-down').classList.remove('wj-glyph-down');
    }
  

  http://jsfiddle.net/6b4rz18h/

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 28 January 2018, 11:46 pm EST

  Hi,

  Can you please present solution in TypeScript, this is an Angular 1 approach.
  
  I am using Angular 5 and TypeScript.

  Thank you

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 29 January 2018, 9:28 pm EST

  Hello,

  I have tried next code, but this only works if I click on datepicker. Do you have some other suggestion? Why does initialized event is not triggered by Angular?

     <wj-input-date #openedOn
                                (initialized)="setIcon(openedOn,$event)">
  
  // a method in controller
  
      setIcon(s: wjcInput.InputDate, e: wjcCore.EventArgs) {
          this.commonService.changeDatePickerIcon(s, e);
      }
  // method in the service
  
    changeDatePickerIcon(s: any, e: any) {
                 s.calendar.formatItem.addHandler((sender: any, args: any) => {
                  if (s.hostElement.querySelector('.wj-glyph-down')) {
                  s.hostElement.querySelector('.wj-glyph-down').classList.add('fa');
                  s.hostElement.querySelector('.wj-glyph-down').classList.add('fa-calendar');
                  s.hostElement.querySelector('.wj-glyph-down').classList.remove('wj-glyph-down');
              }
         });
      }
  

  Thank you,
  
  M

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2018, 8:07 pm EST

  Try this

    <wj-input-date #inputDate [(value)]="today"
                                     [min]="minDate"
                                     [max]="maxDate" 
                                     (initialize)="setIcon(inputDate,$event)">
                      </wj-input-date>
  

      @ViewChild("inputDate") public inputDate: wjcInput.InputDate;
  
      ```
  

  export class AppCmp {

      @ViewChild("inputDate") public inputDate: wjcInput.InputDate;
  
      ngOnInit() {
       
          this.inputDate.hostElement.querySelector('.wj-glyph-down').classList.add('fa');
      }
  

  
  }

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 31 January 2018, 9:20 pm EST

  Thank you!

  Works like a charm…