jQuery UI Date Picker

index.html

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

jquery-ui-date-picker.markdown

jQuery UI Date Picker

Built on top of Andreas Storm date picker: http://codepen.io/andreasstorm/pen/bBFgK

A Pen by Ashley Ktorou on CodePen.

License.

script.js

$(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);
	});
});

scripts

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

style.sass

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

styles

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