Pure CSS Date Picker

You can see this sort of datepicker in a considerable lot of the enrollment structures. You can tap on the field which presents you a datepicker from which you can pick the dates you need. There likewise is a bolt catch which scrolls down smoothly to the next month on snap.The designer uses HTML and CSS to accomplish this design. You get the whole source code underneath, so you can without much of a stretch work with this layout.



HTML

<div class="coc-form">
  <div class="coc-block-row">
    <label class="coc-block-label" for="dateofbirth">Date Of Birth</label>
    <div class="coc-block">
      <input class="coc-input" type="date" name="dateofbirth" id="dateofbirth">
    </div>
  </div>
</div>


CSS

[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
 
/* custom styles */
body {  
  font: 13px Verdana, sans-serif;
}
label {
  display: block;
}
input {
  border: 1px solid #c4c4c4;
  background-color: #fff;  
  width: 95px;
}
 
.coc-block-row {
    width: 100%;
    /*display:table-row;*/
}
.coc-block {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 3px;
}
.coc-block-label {
  font-family: Verdana;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding-bottom: 3px;
  padding-right: 5px;
  font-weight: bold;
  margin-bottom: 0;
}
.coc-input {
  font-family: Calibri;
  height: 20px;
  font-size: 12px;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #999;
  /* variations */
}
.coc-form {
    padding-top: 5px;
    padding-left: 8px;
}

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by Thorazul. Visit their official repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.