What is the process for modifying the underline color in ion-datetime for invalid dates?

I am looking for a solution to change the color of the underline on invalid dates to red. I have not attempted any fixes yet as there doesn't seem to be any similar query online.

Here's the code snippet related to Date and Time:

<ng-container *ngSwitchCase="'picker'">
    <ion-item no-padding class="item-icons">
        <ion-label [attr.missing-detail]="missingDetail(field.formControlName) ? '' : null"
            class="form-label"
            stacked>
            {{ (field.label | translate) + ': ' + isFieldRequired(field.validators.required)}}
        </ion-label>
        <ion-datetime 
            [max]="field.validators?.max ? field.validators?.max : null"
            [required]="field.validators?.required"                            
            (ionChange)="refreshDateTimePicker(field.formControlName)"
            [formControlName]="field.formControlName"
            [cancelText]="'COMMON.CANCEL' | translate" [doneText]="'COMMON.DONE' | translate"
            [displayFormat]="field.others.displayFormat" [pickerFormat]="field.others.pickerFormat">
        </ion-datetime>
        <mat-icon item-right [svgIcon]="field.others.icon"></mat-icon>
    </ion-item>
</ng-container>

cssangularionic-framework

Answer №1

To customize the underline color of an ion-input in Ionic 4, you can leverage CSS Custom Properties. Simply add the desired properties to the component's scss file.

:host {
  ion-item {
      --border-color: white; // default underline color
      --highlight-color-invalid: pink; // invalid underline color
      --highlight-color-valid: yellow; // valid underline color
  }
}

For more information on using CSS Custom Properties with Ionic items, check out this documentation.

Credit goes to Milan Chandro for the solution provided in response to a question about changing ion-input underline color in Ionic 4.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is Angular2 the Perfect Fit for Custom HTML Webresources in Dynamics CRM 2016?

Has anyone experimented with integrating Angular2 for custom webresource development in Dynamics CRM 2016? I searched for resources but only came across tutorials on using AngularJS, such as this one ...

angulardynamics-crmwebresource

What is the best way to line up a checkbox and its labels alongside a dropdown menu?

My index.html file has a header like this: https://i.sstatic.net/s0hAt.png I'm trying to align the checkbox and its label with the dropdown menu "In ordine". I'm using only bootstrap (no custom classes) and my current page layout is as follows. ...

htmlcssbootstrap-4

Exploring the magic of cubic-bezier transitions in combination with Bootstrap Tabs buttons

I'm experimenting with creating a tab button switching animation similar to a specific reference, but without using Bootstrap Tabs. var tabs = $('.tabs'); var selector = $('.tabs').find('a').length; //var selector = ...

htmlcssbootstrap-5

Instructions on transferring a sqlite database from ionic1 and saving it to an external storage device

My Ionic1 app is live, but I am facing some serious issues with SQLite where data is not getting updated in different tables. I am looking for a way to extract the SQLite database from the app and save it to external storage using Ionic1 and AngularJS. A ...

androidangularjssqliteionic-framework

Mastering error handling in Angular's Http requests

In my frontend application using Angular, I need to communicate with a RESTful webservice for the login process. The webservice returns different response codes in JSON format depending on the success or failure of the login attempt: If the login is corre ...

angularhttp

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

htmlcsswordpressfont-awesome

style the table cells based on results of winner values retrieved from JSON

After fetching JSON data, I am utilizing angular JS to present it in a table. The table consists of multiple rows that are populated from the JSON file using ng-repeat. The value for Status.winner can either be 0 or 1. If the winner's value for a p ...

cssangularjsjsonangularjs-ng-repeatng-bind

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

javascriptangularjsionic-framework

Is the Sass variable for Bootstrap 4 navbar height not available?

In looking through the sass files of Bootstrap 4, I noticed that the $navbar-height variable is not present. Can someone please provide me with the specific sass variable to adjust the navbar height in Bootstrap 4? ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Utilizing the predefined color palette of Bootstrap for styling text in a

When creating a form using Bootstrap, I want to add some text in a color that matches the brand color used for buttons. While I am aware of the text colors like text-primary available in Bootstrap, I prefer to use button colors for my text. I attempted th ...

csstwitter-bootstrap

The navigation toggler seems to be malfunctioning in the browser, but it is functioning properly on Code

I'm having an issue with my navigation bar toggler. The code works fine in Codeply, but not in the browser. The hamburger button appears on mobile, but the lists are not showing up. Here is the code snippet I'm using: <html> <head> ...

htmlcssbootstrap-5

Guide on Modifying the CSS File of an Installed Plugin on WordPress

I am looking to customize the design of a WordPress plugin by editing its CSS file. When trying to locate the CSS file of the installed plugin through Plugins --> Installed Plugin --> Editor, I could only find .php files instead of the desired CSS f ...

phphtmlcsswordpress

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Everything seems to be working well with the navbar initially, but when resizing the screen to a smaller resolution, all the navigation items disappear and the "hamburger icon" fails to appear. <nav class="navbar navbar-custom navbar-expand-md fi ...

htmlcssbootstrap-4

An easy fix for handling various model and view values in Reactive input controls within Angular applications

Within my formControl, I have set the value to an object like {id: 1, name: 'Ramesh'}. The input field inside a mat-form-field is read-only and the value is either retrieved from a database or selected from a pick list. In order to display a dif ...

angularangular-materialangular-reactive-forms

CSS border margin-bottom attribute not functioning correctly

I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...

htmlcssbordermargin

Align the Font Awesome icon and text in the middle vertically within an <a> tag/router-link

My b-button acts as a router-link/a tag, and I can't seem to get the content centered the way I want. I'm aiming for the text to be below my font awesome icon, with both elements aligned both horizontally and vertically, but nothing I've tri ...

htmlcsstwitter-bootstrapvue.js

Activate the datepicker in Angular by clicking on the input field

This is my html file: <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-date ...

htmlangulardatepicker

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

I've successfully implemented AJAX to retrieve specific page content from a database, but now I'm facing an issue: When it comes to the 'Contact' page, the form retrieved from the database (as HTML) is not applying the CSS styles I hav ...

phpjavascripthtmlcssajax

Steps for highlighting specific character(s) within a textarea

I am working on a program to search for specific characters within a designated <textarea> element. I want to be able to highlight or color the characters that match the search criteria within the text area. How can I achieve this effect and color th ...

javascriptjquerycsstextarea

Why is the ngx slick carousel not functioning properly within the ngx-bootstrap accordion in Angular 7?

I am trying to incorporate the ngx-slick-carousel inside an ngx-bootstrap accordion and tabs. The tabs are located within the accordion, but when I try to add the carousel outside of the accordion, it works fine. How can I successfully add it inside the ...

angularaccordionslick.jsngx-bootstrap-accordion