Built on top of Andreas Storm date picker: http://codepen.io/andreasstorm/pen/bBFgK
A Pen by Ashley Ktorou on CodePen.
<div class="date-picker"> | |
<div class="input"> | |
<div class="result">Select Date: <span></span></div> | |
<button><i class="fa fa-calendar"></i></button> | |
</div> | |
<div class="calendar"></div> | |
</div> | |
Built on top of Andreas Storm date picker: http://codepen.io/andreasstorm/pen/bBFgK
A Pen by Ashley Ktorou on CodePen.
$(function() { | |
$( ".calendar" ).datepicker({ | |
dateFormat: 'dd/mm/yy', | |
firstDay: 1 | |
}); | |
$(document).on('click', '.date-picker .input', function(e){ | |
var $me = $(this), | |
$parent = $me.parents('.date-picker'); | |
$parent.toggleClass('open'); | |
}); | |
$(".calendar").on("change",function(){ | |
var $me = $(this), | |
$selected = $me.val(), | |
$parent = $me.parents('.date-picker'); | |
$parent.find('.result').children('span').html($selected); | |
}); | |
}); | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
body | |
background: #f7f6f3 | |
font-family: sans-serif | |
.date-picker | |
margin: 200px auto | |
.date-picker | |
$height: 50px | |
$width: 260px | |
$color-one-light: #8392A7 | |
$color-one-dark: #68768A | |
$color-white: #fff | |
width: $width | |
height: auto | |
max-height: $height | |
background: white | |
position: relative | |
overflow: hidden | |
transition: all 0.3s 0s ease-in-out | |
.input | |
width: 100% | |
height: $height | |
font-size: 0 | |
cursor: pointer | |
.result, button | |
display: inline-block | |
vertical-align: top | |
.result | |
width: calc(100% - #{$height}) | |
height: $height | |
line-height: $height | |
font-size: 16px | |
padding: 0 10px | |
color: grey | |
box-sizing: border-box | |
button | |
width: $height | |
height: $height | |
background-color: $color-one-light | |
color: white | |
line-height: $height | |
border: 0 | |
font-size: 18px | |
padding: 0 | |
&:hover | |
background-color: $color-one-dark | |
&:focus | |
outline: 0 | |
.calendar | |
position: relative | |
width: 100% | |
background: #fff | |
border-radius: 0px | |
overflow: hidden | |
.ui-datepicker-inline | |
position: relative | |
width: 100% | |
.ui-datepicker-header | |
height: 100% | |
line-height: 50px | |
background: $color-one-light | |
color: $color-white | |
margin-bottom: 10px | |
.ui-datepicker-prev, .ui-datepicker-next | |
width: 20px | |
height: 20px | |
text-indent: 9999px | |
border: 2px solid $color-white | |
border-radius: 100% | |
cursor: pointer | |
overflow: hidden | |
margin-top: 12px | |
.ui-datepicker-prev | |
float: left | |
margin-left: 12px | |
&:after | |
transform: rotate(45deg) | |
margin: -43px 0px 0px 8px | |
.ui-datepicker-next | |
float: right | |
margin-right: 12px | |
&:after | |
transform: rotate(-135deg) | |
margin: -43px 0px 0px 6px | |
.ui-datepicker-prev, .ui-datepicker-next | |
&:after | |
content: '' | |
position: absolute | |
display: block | |
width: 4px | |
height: 4px | |
border-left: 2px solid $color-white | |
border-bottom: 2px solid $color-white | |
.ui-datepicker-prev:hover, .ui-datepicker-next:hover, .ui-datepicker-prev:hover:after, .ui-datepicker-next:hover:after | |
border-color: $color-one-dark | |
.ui-datepicker-title | |
text-align: center | |
.ui-datepicker-calendar | |
width: 100% | |
text-align: center | |
thead | |
tr | |
th | |
span | |
display: block | |
width: 100% | |
color: $color-one-light | |
margin-bottom: 5px | |
font-size: 13px | |
.ui-state-default | |
display: block | |
text-decoration: none | |
color: #b5b5b5 | |
line-height: 40px | |
font-size: 12px | |
&:hover | |
background: rgba(0,0,0,0.02) | |
.ui-state-highlight | |
color: $color-one-dark | |
.ui-state-active | |
color: $color-one-dark | |
background-color: rgba(131, 146, 167, 0.12) | |
font-weight: 600 | |
.ui-datepicker-unselectable | |
.ui-state-default | |
color: #eee | |
border: 2px solid transparent | |
&.open | |
max-height: 400px | |
.input | |
button | |
background: $color-one-dark | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |