Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

after selecting date how to remove X mark(clear button) in html 5 [input type="date"]

I know this may seems duplicate question but I still not get clear idea about the clear button in firefox and up/down arrows in chrome. It occupies more space in my table. I want to remove those functions. I really don't know is there any function in javascript or in CSS I tried this:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

but, still getting the same X mark.

enter image description here

like image 982
Aroon Avatar asked Jan 19 '18 06:01

Aroon


People also ask

Which html5 attribute can be used with html5 data input type to limit date selection?

The step Attribute Tip: This attribute can be used together with the max and min attributes to create a range of legal values. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

How do I change the date picker format in HTML?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.

How do I turn off date field?

< p >To disable the date field, double click the "Disable" button. // Set disabled = true.


1 Answers

In Chrome you can use

input[type="date"]::-webkit-inner-spin-button,    
input[type="date"]::-webkit-clear-button { display: none; }

Firefox, on the other hand, doesn't have support for this.

You'd probably be better off using a 3rd party jQuery plugin.

like image 62
Sani Singh Huttunen Avatar answered Oct 04 '22 10:10

Sani Singh Huttunen