How to Highlight Particular Dates in JQuery UI Datepicker

Highlighting particular dates

In this post I will cover how to highlight specific dates in Jquery UI Datepicker. It pretty simple actually, we will add a custom CSS class to particular dates and then style those particular dates.

Here are steps which we will be following to highlight particular dates in datepicker:

  1. We use array to hold the dates which will be highlighted.
  2. We will utilize  datepicker beforeShowDay function to add custom CSS classes to the dates in array
  3. We will add CSS rules to style the dates.

Continue Reading

How to Disable HyperLink using Jquery -3 Techniques

In this post I will discuss various approaches to disable a Hyperlink with Jquery.  More specifically, I will be covering 3 approaches


  1. Disable Links by utilizing preventDefault
  2. Disable Links by Removing the href attribute
  3. Disable Links by utilizing the click handler

Lets start


Continue Reading

How to crop an image using PHP and JQuery

Crop Image


The most common requirement over the modern web applications is upload image, crop as required or resize it, whether for profile picture use or any other use in photo galleries (small and bigger image) or as thumbnails. This post is going to be very interesting for the beginners who haven’t played with images for web applications and others can use this as a reference for the awesome web applications. We will cover all the basic requirement and we have also provided the source code for direct view of the output which you can use in every day situations. A small definition of cropping from Wikipedia:

Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio.

The Concept

Before we begin, I will briefly discuss the concept behind cropping an Image.

We will use a combination of Jquery and PHP to achieve our goal. More specifically we will utilize the imgAreaSelect jQuery plugin. We will also utilize Image functions specific to PHP.

Here is what we will be doing

  1.  Allow a user to make a selection by dragging over the Image. We also have a Preview Panel which lets user view the selection in real -time
  2. Hold the Coordinates of the selection in hidden Form Fields. We will utilize the onSelectEnd callback function. The onSelectEnd callback is fired as soon as a user finishes making the selection.
  3. Post selection coordinates to the crop.php file. The crop.php file will be responsible for final cropping of the image. We will utilize imagecreatetruecolor, imagecreatefromjpeg , imagecopyresampled and imagejpeg functions to actually crop the image
  4. Finally we will display the cropped image.

Note: We assume that you have basic PHP programming knowledge, and your server is up and running. We are also assuming that you have knowledge of how to upload image using PHP.Continue Reading

How to Disable Dates in Jquery DatePicker – A Short Guide

Disable Weekends Jquery DatePicker

In my last post I talked about how you can disable past dates in Jquery datepicker. In this post I will discuss various methods for disabling dates in Jquery Datepicker.

More specifically I will be covering following cases


  • How to Disable Weekends
  • How to Disable Specific Dates
  • How to Disable Weekends + Specific dates
  • How to Disable Week Days Or Only Enable Weekends
  • How to Disable a particular day every week.


We will be utilizing the beforeshowday function throughout this tutorial.Continue Reading

How to disable past dates in Jquery Datepicker

In this post I will share a simple technique to disable past dates in Jquery DatePicker.

Use the following snippet and it will set today as the minimum selectable date. 


$("#datepicker").datepicker({ minDate:0});


The minDate parameter is used to set a minimum selectable date. Passing ‘0’ will tell datepicker to set minimum selectable date ‘0’ days from today.   In other words, it disable all past dates.

Similarly passing ‘5’ will set minimum date as 5 days from today.

Another point to note is that the calendar picks todays date from system’s settings. So users in different timezones might get different minimum selectable date.

Update: We have posted a more thorough guide on disabling dates in jQuery DatePicker.

Continue Reading