Date Picker

jQuery datePicker

by Hugo Licon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
  <p>Date:
    <input type="text" id="datepicker">
  </p>
</body>

SCSS

$gray: rgb(57, 70, 78);
$red: rgb(253, 64, 60);
$blue: rgb(36, 149, 238);
$pink: rgb(237, 92, 101);
/* ---------------CALENDAR STYLES ----------------- */
  .ui-datepicker-inline {
    padding: 30px;
  }
.ui-datepicker {
  /* background: linear-gradient(to left top, #4477EE, #3366AA); */
  background: white;
  color: $gray;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #2C3E50;
  font-size: 13px;
  /* Quitar la decoracion de
  de los hipervinculos del calendario */
  a {
    text-decoration: none;
    color: $gray;
  }
  /* background al pasar el mouse
  sobre los dias */
  td:hover {
    background: $blue;
    border-radius: 5px;
  }
}

//header del calendario
  .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-today {
  background: $red;
  border-radius: 5px;
}

body {
  font-family: 'Helvetica', sans-serif;
}
input{
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  color: #2C3E50;
  font-size: 13px;
}

JavaScript

$("#datepicker").datepicker({
    format: "dd/mm/yyyy",
    weekStart: 1,
    autoclose: true,
    todayHighlight: true,
    toggleActive: true,
    prevText: '<i class="fa fa-fw fa-angle-left"></i>',
    nextText: '<i class="fa fa-fw fa-angle-right"></i>'
});