Html Date Input Without The Date Picker

I have a simple date input It looks like this: How would i get rid of the arrows an

Solution 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):
<inputtype="text"pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" /></label><inputtype="date" />

Solution 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 localevar localizedDate = webshim.format.date($.prop(e.target, 'value'));
            $display.html(localizedDate);
        });
    });
});

.hide-replaced.ws-inputreplace {
    display: none !important;
}
.input-picker.picker-listtd > 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-invalidinput {
    border-color: #c88;
}
.ws-invalidlabel {
    color: #933;
}
div.ws-successinput {
    border-color: #8c8;
}
form {
    margin: 10px auto;
    width: 700px;
    min-width: 49.6154em;
    border: 1px solid #000;
    padding: 10px;
}
.form-row {
    padding: 5px10px;
    margin: 5px0;
}
label {
    display: block;
    margin: 3px0;
}
.form-rowinput {
    width: 220px;
    padding: 3px1px;
    border: 1px solid #ccc;
    box-shadow: none;
}
.form-rowinput[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;
}

<formaction="#"class="ws-validate"><h2>1 Calendars without visible input</h2><divclass="form-row"><inputtype="date"class="hide-replaced" /></div><divclass="form-row"><inputtype="submit" /></div></form><hr />