Remove input field options of type datetime-local

Question

I have an input field type datetime-local and I need it to be as clean as possible, without cleaning buttons or step and just displaying the date and time in this format: '12/12/2016 12:01', I would like to know how I can configure this field.

My code:

<input id="prevSolucao" data-bind="value: prevSolucao, enable: !semPrevisao()" placeholder="Previsão de solução" type="datetime-local" class="form-control" style="padding-left: 13px;" autocomplete="off">

Upshot:

I would like to remove the side buttons and that the calendar is not displayed.

Answer 1

With CSS - In Chrome

You can put the whole typing field (::-webkit-datetime-edit), as 100%, which hides the button:

input::-webkit-datetime-edit{
  min-width: 100%;
  width: 100%;
}

<input type="datetime-local">

Wearing a mask

Use a mask. In your case, as the functions of this field are not required, use a input[text] same. In the example I use the Jquery Mask

$('#date-field').mask("00/00/0000 00:00", {placeholder: "__/__/____ 00:00"});

input{
  margin: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<label for="date-field">Datetime - local</label>
<br>
<input type="text" id="date-field">