Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
User42
260
Customize theme of date picker in grid toolbar
posted

Hello,

I'm trying to use the IgxDatePicker in a grid toolbar with custom theming.

I've created a stackblitz with my setup. Please use that as the basis for any examples that you may offer.

https://stackblitz.com/edit/angular-9g52kx

NOTE: You can't see the date pickers I have defined because of the style issues I'm having. Simply adding a white background to the wrapper will show them but I want to avoid that.

My question is three-fold:

  1. How can I get the date picker to register my defined theme?
  2. How can I change the background and color of the label (placeholder text and value of the datepicker) of the date picker (what you see on the page before you click the date picker)?
  3. How do I override the colors in my primary palette?
    1. NOTE: This may or may not actually be a problem. The buttons in my toolbar theme are responding correctly so if 1 and 2 can get answered then perhaps this isn't actually an issue.
    2. You will find a section in styles.scss that I have commented out with the settings for my primary theme see 
      /*******primary theme details*******/

Thanks!

Parents
  • 720
    Verified Answer
    Offline posted

    Hello Jason,

    As a matter of fact, igxDatePicker consists of igxInput and igxCalendar, which could be displayed in modal window or as a dropdown. In the attached sample both approaches are used. Here, you can find a modified version of it, where styles are applied on both types of calendars and on their inputs. I believe that you will find the following guidelines very helpful in order to understand how to achieve the required:  

    • In order to style the igxDatePicker input, a custom igx-input-group-theme should be applied. You can learn more about this in the igxInputGroup styling section as well in our IgxInputGroupComponent Styles API Documentation. Please note that I have added additional igxInput fields into the grid. The reason for that is I wanted to point out that when scoping a theme, it is applied only on the scoped elements. Thus the theme is only applied on the inputs(igx-datepicker) in the grid’s toolbar and won’t affect the rest input elements. In order to learn more about IgniteUI for Angular Styling, take a look at the Styling and Themes Section in our official documentation.

     

    • In order to style both calendars I have injected public element of type ElementRef in the constructor.

     

    • In order to style the calendar, which appears in a dialog window, pass the injected ElementRef to the outlet property of the igxDatePicker’s modalOverlaySettings. Then overwriting the igx-calendar-theme will take effect.

    • In order to style the calendar, which appears as a drop down, the dropDownOverlaySettings of the igxDatePicker should be overwritten. In the attached sample I have used the default igxDatePicker’s positionStrategy and again I have passed the injected ElementRef to the outlet. After that, the igx-calendar-theme will take effect for the drop down calendar as well.

     

    • I believe that you will find the Calendar Styling topic really helpful in order to style it properly the way you want.

     

    You can learn more about the Overlay Settings in our Overlay topic and in the API Documentation.

    Please let me know if you need any further information.

    Best Regards,
    Martin Evtimov
    Entry Level Software Developer
    Infragistics, Inc.

Reply Children
No Data