HTML Date Input Without the Date Picker

html date input without the date picker

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" />

How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

This should do it (without js!) when the field is clicked; when it is first focused it listens only for input, but you could workaround with js.

input#session-date {
    display: inline-block;
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

Note: You'll lose the icon using this method, but you could definitely add one:

Here's the demo on codepen

how do I change the position of date picker/ calendar icon in html and CSS without using bootstrap

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(/*yourURLHere*/) no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin
}

<input class="input-field date" type="date" placeholder="Date and Time">

HTML date picker on android manual type date

Is there a way to allow manual typing via the keyboard ?

Currently, no.

But, you can use a pattern + minlenght + maxlength:

The pattern of date explain here, and you try regex in regex101

var custom_input_date = document.getElementById('customInputDate');
custom_input_date.oninput = function(event){event.target.setCustomValidity('');}
custom_input_date.oninvalid = function(event) { event.target.setCustomValidity('Use a valid format: dd/mm/yyyy'); }

<form>
<input id="customInputDate" type="text" pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)02\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0[1-9]|1\d|2[0-8])(\/)(?:(?:0[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$" maxlength="10" minlength="10" autocomplete="off" placeholder="dd/mm/YYYY" required>
<input type="submit">
</form>

Separate date and time in the input type

You can just define the date and time in your input type.

For example:

Time-

type="time"

Date-

type="date"

---

Related Topics