Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html date input without the date picker

Tags:

html

css

I have a simple date input

<input type="date" id="sign-up-dob" class="sign-inputs" max="2999-12-31"></input>

It looks like this:

enter image description here

How would i get rid of the arrows and stuff to the right that open the date picker. I just want it so you can type the date with validation, thanks.

like image 461
Rachel Dockter Avatar asked Apr 26 '18 22:04

Rachel Dockter


People also ask

How do I get rid of the current date in HTML?

You can add a min or max attribute to the input type=date . The date must be in ISO format (yyyy-mm-dd). This is supported in many mobile browsers and current versions of Chrome, although users can manually enter an invalid date without using the datepicker.

How do I restrict input type date?

Approach: First, we need to write the code for input, and we need to give its type as the date in the HTML file. Then in-order to restrict the user to enter the date manually we can use onkeydown event. In the onkeydownevent we need to return false so that we can restrict the user to enter the date manually.

How do I set the calendar to not allow dates before today's date in HTML?

There is no possible way to do this with pure HTML5. and; var today = new Date(). toISOString().


1 Answers

Just use the pattern attribute on a text input:

input:invalid {
    color: red;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
<label>Input Date (YYYY-MM-DD):
<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
</label>

<input type="date" />
like image 157
dave Avatar answered Oct 16 '22 01:10

dave