Daily UI #13 | jQuery Datepicker summer vibe

daily-ui-13-jquery-datepicker-summer-vibe.markdown

Daily UI #13 | jQuery Datepicker summer vibe

Simple styling of the jQuery UI Datepicker.

Image credit to: https://dribbble.com/PatrykW

A Pen by Håvard Brynjulfsen on CodePen.

License.

index.html

<div class='datepicker'>
  <div class="datepicker-header"></div>
</div>

script.js

$(document).ready(function() {

  $(".datepicker").datepicker({
    prevText: '<i class="fa fa-fw fa-angle-left"></i>',
    nextText: '<i class="fa fa-fw fa-angle-right"></i>'
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.scss

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}

.datepicker {
  width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 50px 0 rgba(0,0,0,0.2);
  margin: 50px auto;
  overflow: hidden;
  .datepicker-header {
    height: 250px;
    background-image: url('https://cdn.dribbble.com/users/3178178/screenshots/6346366/lifeguard_on_duty.jpg');
    background-position: center center;
    background-size: 100%;
  }
  .ui-datepicker-inline {
    padding: 30px;
  }

  .ui-datepicker-header {
    text-align: center;
    padding-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: .1em;
    .ui-datepicker-prev,
    .ui-datepicker-next {
      display: inline;
      float: left;
      cursor: pointer;
      font-size: 1.4em;
      padding: 0 10px;
      margin-top: -10px;
      color: #CCC;
    }
    
    .ui-datepicker-next {
      float: right;
    }
  }

  .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
    thead {
      color: #CCC;
    }
    
    tr {
      th, td {
        padding-bottom: .5em;
      }
    }
    a {
      color: #444;
      text-decoration: none;
      display: block;
      margin: 0 auto;
      width: 35px;
      height: 35px;
      line-height: 35px;
      border-radius: 50%;
      border: 1px solid transparent;
      cursor: pointer;
    }
    
    .ui-state-highlight {
      border-color: #D24D57;
      color: #D24D57;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />