html date input without the date picker - html

Question

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:
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.

Answer 1

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

Answer 2

http://jsfiddle.net/trixta/cc7Rt/ For Reference
webshim.setOptions('forms-ext', {
replaceUI: 'auto',
types: 'date',
date: {
startView: 2,
inlinePicker: true,
classes: 'hide-inputbtns'
}
});
webshim.setOptions('forms', {
lazyCustomMessages: true
});
//start polyfilling
webshim.polyfill('forms forms-ext');
//only last example using format display
$(function () {
$('.format-date').each(function () {
var $display = $('.date-display', this);
$(this).on('change', function (e) {
//webshim.format will automatically format date to according to webshim.activeLang or the browsers locale
var localizedDate = webshim.format.date($.prop(e.target, 'value'));
$display.html(localizedDate);
});
});
});
.hide-replaced.ws-inputreplace {
display: none !important;
}
.input-picker .picker-list td > button.othermonth {
color: #888888;
background: #fff;
}
.ws-inline-picker.ws-size-2, .ws-inline-picker.ws-size-4 {
width: 49.6154em;
}
.ws-size-4 .ws-index-0, .ws-size-4 .ws-index-1 {
border-bottom: 0.07692em solid #eee;
padding-bottom: 1em;
margin-bottom: 0.5em;
}
.picker-list.ws-index-2, .picker-list.ws-index-3 {
margin-top: 3.5em;
}
div.ws-invalid input {
border-color: #c88;
}
.ws-invalid label {
color: #933;
}
div.ws-success input {
border-color: #8c8;
}
form {
margin: 10px auto;
width: 700px;
min-width: 49.6154em;
border: 1px solid #000;
padding: 10px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
label {
display: block;
margin: 3px 0;
}
.form-row input {
width: 220px;
padding: 3px 1px;
border: 1px solid #ccc;
box-shadow: none;
}
.form-row input[type="checkbox"] {
width: 15px;
}
.date-display {
display: inline-block;
min-width: 200px;
padding: 5px;
border: 1px solid #ccc;
min-height: 1em;
}
.show-inputbtns .input-buttons {
display: inline-block;
}
<form action="#" class="ws-validate">
<h2>1 Calendars without visible input</h2>
<div class="form-row">
<input type="date" class="hide-replaced" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />