Sytling DateTime-Local Calendar Clear Button

Viewed 363

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>
1 Answers

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>

Related