Add CSS to a date/time input control on focus

Add CSS to a date/time input control on focus

Posted by: ken on 14 August 2018, 7:52 am EST

• 

  ken

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 August 2018, 7:52 am EST

  I want to apply some styling to the parent wj-input-date / wj-input-time elements when their input is focused. Since IE and Edge don’t support :focus-within, I’m trying to do it programmatically, but I’m not sure how to add it to the element. Here’s what I have so far:

  component.html

  <wj-input-date #startDate (initialized)="initDateTime(startDate)" [(value)]="data.startDate"></wj-input-date>
  <wj-input-time #startTime (initialized)="initDateTime(startTime)" [(value)]="data.startDate"></wj-input-time>
  

  component.css

  .picker-focused {
      outline: none;
      box-shadow: 0 0 0 2px #FF0000;
  }
  

  component.ts

  initDateTime (control: WjInputDate | WjInputTime) {
      control.gotFocus.addHandler(() => {
          // add .picker-focused here
      })
      control.lostFocus.addHandler(() => {
          // remove .picker-focused here
      })
  }
  

  How do I make this work? Or am I going about it wrong, and there’s a better way to apply the style on focus?

• 

  ken

  • Post Options:
  • Link
    Copy

  Posted 14 August 2018, 7:57 am EST

  Is it intentional that I can’t edit my post? Being able to fix or at least preview the code formatting would have been nice.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 August 2018, 10:21 pm EST

  Hi,
  
  Wijmo adds .wj-state-focused class to the focused element, so you may use this class to style components on focus(works on both IE and Edge).
  
  Please refer to the following sample:-
  
  https://stackblitz.com/edit/angular-nscezn?file=app%2Fapp.component.css

  You may also do so via code however CSS is the recommended way.
  
  Please refer to the following code snippet:-

  control.gotFocus.addHandler(()=>{ 
  	//access host element via hostElement property 
  	control.hostElement.style.backgroundColor="seagreen"; 
  });
  //remove the style on lost focus in similar way
  

  Regarding code formatting preview: We have escalated it to the concerned team.

  ~Sharad