Date Picker CSS Reactive Themes

Back to Forums

Gonçalo Aguiar

Solved

Question

Reactive

CSS

Application Type

Reactive

I have a date picker in a table with some logic to be enabled/disabled depending on some conditions.

The problem is that he is always disabled because of some CSS that I found in the custom theme that I can't change.

I attached the OML with my example with the code, the goal is to not be able to edit the hiring date if is in the past and with Complete status. Currently I'm not even able to edit the others.

If that code was removed it would work properly. How can I change in my theme so that the date picker will be able to have the enable disable function again?

Thanks

DatePicker_Goncalo.oml

04 Jul 2023

Benjith Sam

MVP

Solution

Replying to Gonçalo Aguiar's comment on 06 Jul 2023 09:29:52

Hi Gonçalo ,

Sorry, I missed the !important property value defined in the custom base theme style definition.

To make it work, you will need to add the !important property value to all the overridden style rules in the Screen stylesheet section, as shown below.

CSS Snippet:

.is-editable__datepicker[readonly="readonly"] {
    pointer-events: all !important;
    background-color: var(--color-neutral-0) !important;
}

I hope this helps you!

Kind regards,

Benjith Sam

See solution in context

06 Jul 2023

Puja Rani

Hi,

I have done some changes in CSS. Attaching the OML for reference. Hope this helps!.

DatePicker_forum.oml

05 Jul 2023

Gonçalo Aguiar

@Puja Rani thanks for the response, indeed if we comment the my previous css it will work, but if we don't put any css it would also work. The problem is I want this to work with that specific code.

That code is in another theme that I'm not allowed to edit so I need to override it with my code.

05 Jul 2023

5 replies

Last reply 06 Jul 2023

Show thread

Hide thread

Benjith Sam

MVP

Hi Gonçalo,

I have made a few code changes in the attached OML file, as mentioned below:

Instead of computing the value of the datePicker input's enabled property, I have introduced a new Adhoc attribute with the same condition and referenced it in the input's enabled property.

I have referenced the same Adhoc attribute to append custom style classes conditionally as shown below.

In the screen stylesheet section, I have defined a custom CSS definition to override the base theme's style definition.

CSS Snippet:

.is-editable__datepicker[readonly="readonly"] {
    pointer-events: all;
    background-color: var(--color-neutral-0);
}

Please refer to the attached OML file with the implemented code changes.

I hope this helps you!

Kind regards,

Benjith Sam

DatePicker_Ben.oml

06 Jul 2023

Gonçalo Aguiar

Replying to Benjith Sam's comment on 06 Jul 2023 00:17:53

Hi Benjith, that looked good, learned a few things, but unfortunately I tested your OML and the date pickers are still all disabled regardless of the Status.

The base theme is still overriding the class you created.

Regards,

Gonçalo

06 Jul 2023

Benjith Sam

MVP

Solution

Replying to Gonçalo Aguiar's comment on 06 Jul 2023 09:29:52

Hi Gonçalo ,

Sorry, I missed the !important property value defined in the custom base theme style definition.

To make it work, you will need to add the !important property value to all the overridden style rules in the Screen stylesheet section, as shown below.

CSS Snippet:

.is-editable__datepicker[readonly="readonly"] {
    pointer-events: all !important;
    background-color: var(--color-neutral-0) !important;
}

I hope this helps you!

Kind regards,

Benjith Sam

06 Jul 2023

Gonçalo Aguiar

Replying to Benjith Sam's comment on 06 Jul 2023 13:01:12

Thanks it worked perfectly.

Best regards,

Gonçalo

06 Jul 2023

Benjith Sam

MVP

Replying to Gonçalo Aguiar's comment on 06 Jul 2023 16:32:48

You're welcome, Gonçalo. I'm glad to hear that it worked perfectly for you :)

Kind regards,

Benjith Sam

06 Jul 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines