With jQuery UI it is easier to add Datepicker on the textbox element or in any other HTML elements.
If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI.
Using this you can set the date range of the Datepicker.
After defining these options the other days will be disabled which are not in a defined range.
In this tutorial, I show you how to use both options in jQuery UI Datepicker to restrict the date range.
You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.
The common example of this you see in Chrome, Opera mini browser for mobile.
In this tutorial, I show how you can add a similar type of functionality to your web page in desktop view.
I will create two examples,
jQuery not only allows us to attach event handlers on the element and it also allows us to take control of the flow of the events.
You can enable and disable an event whenever you want in your script.
When it’s required?
Enabling and disabling events becomes handy in various scenarios:
To achieve event enablement and disabling, jQuery provides the on() and off() methods. These methods are instrumental in attaching and detaching event handlers from elements, giving you precise control over event behavior.
In this tutorial, I will show how to use the on() and off() methods effectively, along with a practical example.
jQuery UI library has many widgets for specific purposes like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker which allows the users to pick a date from the Widget.
It has various options to manage the Datepicker layout e.g. change the default date format, restricting date range, show year dropdown, etc.
While using this Widget you may have a condition arises where you want to highlight some of the specific dates or change the background-color of Holidays, events Days.
You can do this with beforeShowDay option in the datepicker() method. This allows you to specify a CSS class that contains your defined CSS style.
© 2016-2026 Makitweb, All rights reserved