Tag: jquery ui


While using jQuery UI Datepicker in your project you want to allow users to select only days between your specified date range.

jQuery UI Datepicker has two options – minDate, and maxDate that allow you to specific date range to your Datepicker.

It simply disables other days which are not between the defined range.

In this tutorial, I show you how to use both options in your jQuery UI Datepicker.

How to Set minimum and maximum date in jQuery UI Datepicker


jQuery UI library has many widgets for the specific purpose like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker that allows the users to pick a date from the Widget.

It has various options by which you can manage the Datepicker layout e.g. change default date format, restricting date range, show year dropdown, etc.

While using this Widget you may have condition arises where you want to highlight some of the specific dates, or change background-color of Holidays, events Days.

You can do this with beforeShowDay option in the datepicker() method. This allows you specify CSS class which contains your defined CSS style.

How to Highlight selected date in jQuery UI Datepicker



Whether you are a beginner or not to the WordPress, you have seen the shake effect when you go for the Login in Admin Dashboard.

The login box shakes every time when the user enters the wrong username and password.

In this tutorial, I show How you can create the similar kind of effect using jQuery UI.

What in the demonstration?

For demonstration, I am creating two examples – In first, I am creating a basic Login form which shakes on the wrong username and password and in the second example, using the arguments with shake effect.

How to shake an element using jQuery UI


jQuery is being used in almost every websites and there are plenty of plugins which are used by the web designer for presenting better user experience.

In this tutorial, I discuss How to add a tooltip to a control using jQuery UI that makes its implementation simple.

A tooltip is a message container which shows when the user hovers over the control or an element. It generally contains a short description or some additional information.