jQuery UI datepicker / calendar with 9 examples

jQuery UI datepicker widget

The datepicker widget provided by jQuery UI is highly customizable and very easy to use. From color scheme customization to choosing option to show a calendar e.g. showing week numbers, multiple months, restricting date ranges and others is just a matter of setting a few lines of options and code.

A 2 minute Video of this Tutorial

A jQuery calendar opens in an overlay that may be associated to e.g. a text field, text field with an icon while you can open it in a div, span etc. elements as well.

In early times of web development, one had to develop its own calendars or find out basic scripts from code sites and then integrate ugly to basic looking calendars into your websites. Just like in many other features jQuery and jQuery UI made developers and designers life very easier and let them focus on other stuff.

In this tutorial, we are going to show you how simply you can integrate a calendar by using jQuery datepicker widget with different options, methods, and effects. You can click on datepicker images or demo link to get code containing CSS, HTML, and javascript/jQuery.

A basic jQuery datepicker example

In its simplest, you can create a calendar in jQuery by creating a text field and just call it by ID in script area as shown below. If you include jQuery UI CSS then it will take the default color. You can use your own theme colors, however, here we will show how easy it is to create a jQuery date calendar:

jquery datepicker basic

See online demo and code

The jQuery script for date picker:

The HTML code:

You can see the default calendar shows the current month with next and previous icons with the grayish theme.

Now let us look at choosing different themes and calendars with different options.

A datepicker example with different color scheme

In this example of datepicker jQuery UI widget, we will override default CSS scheme. The calendar will use CSS styles of UI CSS in internal CSS. Although, you can use your own custom CSS file and apply this to datepicker, we will cover this in the later part of this tutorial.

jquery_datepicker_blue

See online demo and code

You can see the color of month and year in the title bar and the background color of the calendar are changed. Also, dates are made underlined. We changed following CSSclasses:

ui-datepicker, .ui-datepicker-title, ui-datepicker table and ui-datepicker td a.

The CSS used in the example:

While script and markup almost remains the same as in the first example.

A datepicker jQuery example with different effect

The jQuery datepicker UI widget has an option that you can use to open or close calendar overlay with a specified effect. The option is showAnim that you can assign a different value that represent the effect. The list is available in the official website: http://api.jqueryui.com/category/effects/.

Following examples show how you can use this option. The first example uses slideDown effect.

jquery datepicker slideDown

See online demo and code

The script:

Following example uses bounce effect. This is the replica of above example except the effect value.

See online demo and code

The script for this example:

 

Similarly, you can use bounce, clip, drop etc. values to make datepicker open with a different effect.

Date formatting in jQuery Calendar

The jQuery UI datepicker format date option allows to format dates quite easily. The option name is dateFormat that you can use in the script and specify as per requirement. You can use formatting characters to format date. For example:

  • D – Name of the day in three character e.g. Fri, Sat, Sun
  • DD – Full day name e.g. Friday, Saturday, Sunday
  • d – (small d) will format day number without leading zero while dd will format by leading zero.
  • Similarly, M is for month name like Jan, Feb, Mar
  • MM is for full month name e.g. January, February, March
  • m (small m) is for month number without leading zero like 1 for Jan.
  • mm is for month number with leading zero e.g. 01, 02..
  • and y is for two digit year while yy is for four digit year.

In the following example, the date is formatted in yy-mm-dd format. That means the date is shown in four digit year and the month with leading zero and day number.

See code by clicking the link or image below.

jquery datepicker formatdate

See online demo and code

The script with date formatting options:

 

jQuery date in full Month name format

In the following example, we will format the date in full Month name format. The formatting character M is used to get the short name of the month while MM will get the full name. The returned date should look like this:

December 24, 2013

jquery calendar formatdate_fullmonth

See online demo and code

The code:

 

jQuery Date in day name format

In this example, we will use DD date formatting with other characters to show date in this format: e.g. Saturday 22 Mar 2013.

You can use single D to show date in short day name like Sat, Sun.

jquery calendar fullday

See online demo and code

The jQuery code for day name format:

Restricting date selection in jQuery date

By using jQuery calendar plugin, you can restrict the date selection as well. For example, your site has an option to pull reporting only for last three months. So you want a user to navigate only to last three months. After that, the arrow and days will be disabled so selection cannot be made.

This can be done quite easily in datepicker widget by using minDate and maxDate options. The minDate specifies the backward date in the calendar while maxDate allows setting the next dates.

In next example, the UI calendar is shown with three months backward selection and one month ahead. You can also use other options like the animation style and date format with minDate and maxDate (besides other options and methods provided by jQuery UI datepicker plugin).

jquery calendar mindate maxdate

See online demo and code

The script:

You can see days and arrow to select month are disabled after reaching the specified limit.

A calendar example with icon

You can use a calendar icon ahead of area or field where you will display chosen date by using available options in datepicker UI plugin. These options are showOn with button value. The buttonImage option specifies which icon file to use. The following example shows you how you can include an image ahead of a textbox that contains selected date.

jquery datepicker icon

See online demo and code

The script:

 

As you click on the calendar icon, it will display the calendar with restricted dates and specified effect.

Styling calendar with more customized CSS

In above examples, we used different options provided by jQuery UI datepicker widget. As for calendar style, we used jQuery UI CSS file and simply override few of its classes to change the header where month and year appears. Also, we changed the background color of calendar etc.

You can avoid to include default CSS file by jQuery UI. Rather you can simply use a few of its classes and ids and simply include the CSS file of your own (external CSS) or use <style> inside your web page where you will use that calendar.

In the following example, we will not include default CSS. The web page will only include jQuery and jQuery UI libraries. Note that, you even do not require to include whole UI library into your web page if you are using only calendar widget. Simply include components that you need for the project and download customized JavaScript here: http://jqueryui.com/download/. This will reduce overhead at your web server.

Reason why we included whole libraries in our demos is because we are using CDN.

Before explaining any further, have a look at following jQuery calendar image and code link:

jquery datepicker customized CSS

See online demo and code

The jQuery code:

The complete CSS used for above calandar:

First of all, we used three letters for day names that are done in the script section of the example unlike above example that used two letters. See this line in code:

dayNamesMin: [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’]

In header section, we changed the background color and used prev / next. You can replace previous and next to icons by using background-image property in ui-datepicker-next and ui-datepicker-prev classes.

After that, the days appearance is managed with a different color scheme in its classes. You can use ui-datepicker-calendar .ui-state-default for main day blocks.

The current date or active date can be stand out by using its class: ui-datepicker-calendar .ui-state-active.

If your calendar shows previous or next month days that are non-selectable, you can style this by using ui-datepicker-unselectable .ui-state-default class.

Also, we used few other options in script section that controlled effect of displaying calendar and date format as well.