calender price datepicker code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<style>
div.datepicker{
float:right;
}
.ui-datepicker .weekend .ui-state-default {
background: #FEA;
}
.ui-datepicker-calendar td a[data-custom] {
position: relative;
padding-bottom: 10px;
}
.ui-datepicker-calendar td a[data-custom]::after {
content: '$' attr(data-custom);
display: block;
font-size: small;
}
</style>
<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>
<script>
$( function() {
$( "#datepicker" ).datepicker(
{
beforeShow: addCustomInformation,
beforeShowDay: function(date) {
return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"];
},
onChangeMonthYear: addCustomInformation,
onSelect: addCustomInformation
}
);
addCustomInformation();
} );
function addCustomInformation() {
setTimeout(function() {
$(".ui-datepicker-calendar td").filter(function() {
var date = $(this).text();
return /\d/.test(date);
}).find("a").attr('data-custom', 110);
}, 0)
}
</script>
</head>
<body>
<input type='button' value="http://design.maa-aahwanam.com/panagea/images/icons/calendar.png" id="datepicker" style="height:17px ;width:20px;margin-top:85px;margin-left:10px" />
</body>
</html>