Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the blue cross on datetime-local HTML input in Chrome 27?

I was using the datetime-local input but since Chrome v27 a blue cross appears which allows to clear the choosen datetime. I don't want it and get back to the input we had with chrome 26.

Here is how I define the input:

<input  type="datetime-local" value="1985-04-12T23:20:50.52"/>

See it in this jsFiddle. Open it with Chrome 27 to see the blue cross

Do you know how to remove this blue cross?

Edit :

As a temporary workaround, I've disabled the blue cross functionality by resetting the value if the new one was cleared (see it in JSFiddle )

$('input#testInput').on('change', function(event)
{    
    var newValue = $('input#testInput').val();
    if(!newValue || newValue === "")
    {
        $('input#testInput').val(lastValue);
    }
    else
        lastValue = newValue;
});

It doesn't really fit the initial need so I'm still looking for a good solution.

like image 395
Guian Avatar asked May 22 '13 09:05

Guian


People also ask

How to take date and time input in HTML?

<input type="datetime-local"> <input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

How do I change the input date format?

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.

What input types are included in datetime input in html5?

Date and time input types Refers to supporting the following input types: `date`, `time`, `datetime-local`, `month` & `week`.

What is the difference between datetime and datetime-local?

The difference between the two is that the datetime-local input does not include the time zone. If the time zone is not important to your application, use datetime-local. Some browsers are still trying to catch up to the datetime input type.


1 Answers

This is how you remove cross and arrows:

input::-webkit-outer-spin-button, /* Removes arrows */
input::-webkit-inner-spin-button, /* Removes arrows */
input::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}
like image 132
Lasse Avatar answered Sep 17 '22 02:09

Lasse