CODEWITHSUNDEEP
jqueryhtmlcssdateinput
Marcius Leandro
Marcius Leandro

Reputation: 789

Customize input type date

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

enter image description here

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;
}

Upvotes: 0

Views: 9643

Answers (1)

miguelmpn
miguelmpn

Reputation: 2037

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

Upvotes: 1

Related Questions