JQuery DatePicker Styling – Custom CSS

  • by
jquery_datepicker_custom_design_css
Post Views: 6,118

In this post we will see how we can style the JQuery Datepicker with custom CSS design. We will make a simple HTML page and add the JQuery datepicker to it. Then we will add custom css design to our control. So let’s begin.

Html code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JQuery Date Picker Demo</title>
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-20:+0"
});

});
</script></head>
<body>
<h1>Select a Date</h1>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
This will create Jquery datepicker with default styling like below:
jquery_datepicker_css_default_simple

JQuery Datepicker default design CSS

Now in the HTML head tag add below css code which will design our datepicker:

CSS:
<style>
body {
padding: 5px;
font-family:Arial;
}

.ui-datepicker {
background-color: #fff;
}

.ui-datepicker-header {
background-color: #616eff;
}

.ui-datepicker-title {
color: white;
}

.ui-widget-content .ui-state-default {
border: 0px;
text-align: center;
background: #fff;
font-weight: normal;
color: #000;
}

.ui-widget-content .ui-state-default:hover {
border: 0px;
text-align: center;
background: #000;
font-weight: normal;
color: #fff;
}

.ui-widget-content .ui-state-active {
border: 0px;
background: #616eff;
color: #fff;
}

</style>
jquery_datepicker_custom_design_css

JQuery Datepicker custom design CSS

Complete page:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JQuery Date Picker Demo</title>
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-20:+0"
});

});
</script>

<style>
body {
padding: 5px;
font-family:Arial;
}

.ui-datepicker {
background-color: #fff;
}

.ui-datepicker-header {
background-color: #616eff;
}

.ui-datepicker-title {
color: white;
}

.ui-widget-content .ui-state-default {
border: 0px;
text-align: center;
background: #fff;
font-weight: normal;
color: #000;
}

.ui-widget-content .ui-state-default:hover {
border: 0px;
text-align: center;
background: #000;
font-weight: normal;
color: #fff;
}

.ui-widget-content .ui-state-active {
border: 0px;
background: #616eff;
color: #fff;
}

</style>
</head>
<body>
<h1>Select a Date</h1>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Also see:

Using JQuery Datepicker on ASP.NET forms.

Using JQuery Datepicker on MVC .NET web forms.


Tags: