Customize input type date

Question

I have an input type date, as the image below:

I want to remove it the buttons with the up and down only in summer web, used to change each part of the date.

And also display the entire date, because the text is half off because of the place of buttons.

I am providing a editable code to bottom to facilitate.

<input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">

Pen edit input type date

I know it's a simple question, but not to get to do that. please help me.

I have yet to appear the arrow to open the calendar. Nah actually I have to edit the colors of it as well.

UPDATE

With a help of miguel I could get something with this code, but there's something on the side of the arrow of the calendar, which this escondedo one piece of text.

.date{
  width: 100px;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  background: none;
  padding: 0;
}

I believe this question has already been answered here: http://stackoverflow.com/questions/17954966/how-to-get-rid-of-x-and-up-down-arrow-elements-of-a-input-date — tdsymonds, Feb 11 '16 at 14:26
Possible duplicate of [Can I hide the HTML5 number input’s spin box?](http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) — Mehran Torki, Feb 11 '16 at 14:35

miguelmpn · Accepted Answer · 2016-02-11T14:31:37.373

1

Normally I would do something like this, using a container to hide the unwanted part.. The reason I would use this instead of CSS, is the cross browser compatibility

.container{
  width: 90px;
  overflow: hidden;
  border: 1px solid black;
}
.date{
  width: 125px;
  border: 0px none transparent;
}

<div class="container">
  <input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">
</div>

If you want to try CSS, here is a link... http://qnimate.com/guide-to-styling-html5-input-elements/

.date{
  width: 90px;
  paddi
}
.date::-webkit-calendar-picker-indicator,
.date::-webkit-inner-spin-button {
  display: none;
}

<input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">

edited Feb 11 '16 at 14:31

answered Feb 11 '16 at 14:26

miguelmpn

1,859
1
19
25

Almost this friend, has yet to appear the arrow to open the calendar. Nah actually I have to edit the colors of it as well. – Marcius Leandro Feb 11 '16 at 14:31
I added the CSS alternative, but it's only for Webkit browsers – miguelmpn Feb 11 '16 at 14:36
I understand now what you did, you put something on top to cover a piece of input, and increased the size of it. So it does not solve because it has two arrows in the date type field, change the day and another opens the calendar. Their order is from left to right, first I want to hide that according to maintain. – Marcius Leandro Feb 11 '16 at 14:37
Sorry I don't understand – miguelmpn Feb 11 '16 at 14:53
Sorry I do not speak English very well I'm from Brazil. The solution that you sent, you hide a piece of input. But that's not what I want. Because when you click on the field you have to open the default calendar of input date. – Marcius Leandro Feb 11 '16 at 16:46
this last css solves what I want to draw the line `.date::-webkit-calendar-picker-indicator`. What is Webkit browsers – Marcius Leandro Feb 11 '16 at 16:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103213/discussion-between-marcius-leandro-and-miguelmpn). – Marcius Leandro Feb 11 '16 at 17:20

Customize input type date

1 Answers1