'Sytling DateTime-Local Calendar Clear Button

Is there a way to style or remove this clear button from the calendar pop up that comes with the html5 datetime picker? It is not clearing my field and would like to remove or edit it since it is not working correctly.

enter image description here

Here is the input html

<label for="rowKeyStartDate">Start Date/Time: </label>
<mat-form-field appearance="outline">
    <input matInput id="rowKeyStartDate" type="datetime-local" step="0.001" formControlName="rowKeyStartDate" required>
</mat-form-field>
javascripthtmlcss


Solution 1:[1]

Implicitly one way the Clear button works is to add a hidden <button> element:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test Application</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input id="el" type="datetime-local">
    <button onclick="javascript:el.value=''" hidden></button>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions