9bit Studios » jQuery UI https://9bitstudios.com Web Design, Themes, & Applications Fri, 15 Aug 2014 13:49:47 +0000 en-US hourly 1 https://wordpress.org/?v=3.9.2 How to Style Your Own jQuery UI Calendar https://9bitstudios.com/2012/11/how-to-style-your-own-jquery-ui-calendar/ https://9bitstudios.com/2012/11/how-to-style-your-own-jquery-ui-calendar/#comments Thu, 15 Nov 2012 14:04:51 +0000 https://9bitstudios.com/?p=674 For the most part I like jQuery UI. The library gives you some common elements of interactivity that you find in modern browsers these days (accordions, drag-n-drop, pop-up-calendars, etc.). That being said, I’m not really a big fan of jQuery UI’s theming that comes out of their theme roller… not so much because it don’t look good, but because if you ever want to do any customization on it, it actually turns out to be a rather cumbersome affair. There are quite a few cascading selectors that you have to change values for to get the exact look and feel you want.

Fortunately there is a way to get the best of both worlds and it’s something I’ve found myself doing a lot more of recently… including jQuery UI in my projects but doing all the styling from scratch. It turns out that there’s not a lot off CSS that you have to write if you’re doing things from the ground up and I’ve found that this is often a much more pleasant experience than trying to undo the CSS that comes with a jQuery UI theme.

In this tutorial we will be doing some custom CSS with the jQuery UI datepicker (which is a calendar popup that appears when you want to select a date on a form), but you could easily apply the same ideas in this tutorial to other jQuery UI components as well.

So let’s get started…

HTML

The markup will be fairly straightforward. We’re going to set a simple <input> text field in a form and give it an ID so that jQuery UI will know to show a datepicker popup on the field with this ID (you could also use a class if you wanted to as well)…

<!DOCTYPE html>
<html>
<head>
  
  <title>jQuery UI Calendar / Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>

<h1>jQuery UI Calendar / Datepicker</h1>

<input type="text" id="datepicker" />

</body>
</html>

Include jQuery and jQuery UI

The first thing you’re going to want to do after this is include both jQuery and jQuery UI in your project. I personally like using something the following…

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Where you can choose whatever jQuery UI version you want. It is helpful to look up what the “latest versions” of jQuery and jQuery UI are. Google Hosted Libraries has the latest versions of both jQuery and jQuery UI (and a number of others) that you can easily copy to your clipboard and paste into your markup.

Include a CSS file

We’re also going to want to include a CSS file. Create a folder named “css” and add a style.css file to it. We will add to this later…

<link rel="stylesheet" href="css/style.css">

jQuery

Next you’re going to want to include some jQuery to hook-up our <input> field with jQuery. Place the following block of code right below the <input> field

<script type="text/javascript">
$(document).ready(function(){
  $("#datepicker").datepicker({dateFormat : 'yy-mm-dd'});
});
</script>

So your markup should now look like the following…

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Calendar / Datepicker</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</head>

<body>

<h1>jQuery UI Calendar / Datepicker</h1>

<input type="text" id="datepicker" />

<script type="text/javascript">
$(document).ready(function(){
  $("#datepicker").datepicker({dateFormat : 'yy-mm-dd'});
});
</script>

</body>
</html>

What this block of code does is apply the datepicker function that jQuery UI provides to a field with id “datepicker”. You could name this id value whatever you like or you could call it on a class.

If all goes well, if you place your cursor in the <input> text field on the page you should see an unstyled rudimentary jQuery datepicker popup.

But our current popup looks kinda ugly. So now we’re going to want to style it up.

CSS

Here is some CSS that will get us started. Open up your style.css file and add the following in…

.ui-datepicker {
background: #fff; /* Old browsers */
background: #fff -moz-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* FF3.6+ */
background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc)), color-stop(100%,#fff)); /* Chrome,Safari4+ */
background: #fff -webkit-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* Chrome10+,Safari5.1+ */
background: #fff -o-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* Opera11.10+ */
background: #fff -ms-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* IE10+ */
background: #fff linear-gradient(top, #fcfcfc 0%, #fff 100%); /* W3C */
font-size:11px;
padding:10px;
border:1px solid #ccc;
}

.ui-datepicker table {
width:278px;
}

.ui-datepicker table td {
text-align:center;
}

.ui-datepicker a {
cursor:pointer;
text-decoration:none;
}

.ui-datepicker-prev {
}

.ui-datepicker-next {
float:right;
}

.ui-datepicker-title {
text-align: center;
font-weight:bold;
}

This CSS targets the datepicker classes that jQuery UI adds in.

Now if we click into the <input> text field again. We should see our styled jQuery UI calendar. This is, of course, just a very generic start. You could easily continue on and continue to style the datepicker elements to customize them the exact specifications you so desire. This CSS is a lot cleaner and a lot more lightweight and far less bulky than the CSS that comes with the jQuery UI theme roller.

How do I find the classes and IDs of a the jQuery UI datepicker?

Many people might wonder how I found the classes and ID selectors of the jQuery UI component. I did this by using browser developer tools. Nearly all modern browsers come bundled with developer tools of some sort. Currently I’m doing a lot of my development in Chrome. I use Chrome Developer Tools to inspect the elements on the page. I simply right-clicked on the element in the jQuery UI datepicker and selected “Inspect Element.”

Chrome Dev 1

This brings up Chrome Developer Tools…

Chrome Dev 2

In Chrome Developer Tools you can then see the markup (including the class and ID selectors) that make up jQuery UI datepicker. You can then apply whatever styles you like to your selectors.

The process is similar if you are using Firefox for development. In the past many developers developing in Firefox used the Firebug plugin (which is still a very good plugin), but Firefox now comes bundled with its own developer tools. Internet Explorer has something called F12 Developer Tools which you can also use to accomplish this goal and also has some other nice features including putting your browser into IE8, and IE7 “mode” so you can test and see how your website looks in older versions of IE.

Whatever browser you use to do your development, this is the process that you use to find what is in the markup.

View Demo Download Files

]]> https://9bitstudios.com/2012/11/how-to-style-your-own-jquery-ui-calendar/feed/ 0