How can I change the look of the "X" close button

[rashmidixit]

This is more of a question than an issue: I need to change the look of the X button that shows up when close-on-select is chosen. Unfortunately, there is no way to understand what is the HTML/CSS to apply and the X looks more like the character than a button. How can we update this look? Better would be to have an OK button. The X is not giving the right indication to the user. It looks more like a cancel than an OK.

[allenhwkim]

Please override the existing css for this like the following.

import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  styles: [`
     ...
     .ngui-datetime-picker .close-button::before {
      background-color: red; 
      color: #fff !important;
    }
  `]
})

You can find this from README.md plunker example, https://plnkr.co/edit/J6hXyB?p=preview

[rashmidixit]

Thanks for this @allenhwkim. However, this approach is not very flexible - meaning I cannot change the location of the button. Are you planning to get an OK/Cancel into this component at any point in time?

[allenhwkim]

@rashmidixit I do not have plan to implement OK/Cancel button. However there is a component approach for more flexibility. https://rawgit.com/ng2-ui/datetime-picker/master/app/index.html#/component-test