<div class="datepicker">
<div class="datepicker-header">
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<style>
body { font-family: 'Poppins', sans-serif; }
.datepicker {
width:475px; background: #fdfdfd; border-radius: 10px; box-shadow: 0px 19px 38px rgba(0,0,0,.2),0 15px 12px rgba(0,0,0,0.2);
margin: 15px auto;
overflow: hidden;
}
.datepicker .datepicker-header { height: 250px; background: url(https://www.tolmatol.com/uploads-images/jquery-ui-calendar/calendar.jpeg); background-size: cover;}
.datepicker .ui-datepicker-inline { padding: 30px; }
.datepicker .ui-datepicker-header { text-align: center; font-size: 1.4em; padding-bottom: 0.5em; letter-spacing: 0.1em; color: #333;}
.datepicker .ui-datepicker-header .ui-datepicker-prev, .datepicker .ui-datepicker-header .ui-datepicker-next {
float: left;cursor: pointer; font-size: 1em; padding: 12px 5px; margin-top: -8px; color: #ddd; transition: .6s;
}
.datepicker .ui-datepicker-header .ui-datepicker-next {float: right; }
.datepicker .ui-datepicker-calendar { width: 100%; text-align: center;}
.datepicker .ui-datepicker-calendar thead { color: #ddd; font-weight: 400;}
.datepicker .ui-datepicker-calendar tr th, .datepicker .ui-datepicker-calendar tr td { padding: 0.2em;}
.datepicker .ui-datepicker-calendar a { color: #333; text-decoration: none; display: block; margin: 0 auto; width: 30px; height: 30px;line-height: 30px; border-radius: 4px; border: solid 1px transparent; cursor: pointer;}
.datepicker .ui-datepicker-calendar a:hover { background: #da89a2; color: #fff; transition: .7s; transform: scale(1);}
.datepicker .ui-datepicker-calendar .ui-state-highlight { background: #9c27b0; color: #fff;}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".datepicker").datepicker({
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
})
});
</script>