Last Updated on April 5th, 2022

Every application has presentation layer wherein we use Scripting languages to provide the attractive user interface feelings to the application. These scripting languages sometimes are known as UI technologies. In UI design we use Javascript, jQuery multiple times. One of the best place to practice UI technologies is w3schools.com.

JavaScript, jQuery Utility Methods

Q1. How to implement more than two options/buttons in confirm box using JavaScript, jQuery?

A1. It is not possible in javaScript as simple as in jQuery using jQuery dialog. Sometimes user wants to have more than two buttons to make particular decision. It is possible by using below method wherein any number of buttons can be added as per our need.

jQuery("#confirmBox").dialog({

 bgiframe: true, autoOpen: false, height: 160, modal: true,

   buttons: {
                 Great: function() {                  
                 // do something
                 },

                 Horrible: function() {
                 // do something
                 },

                None of your business!: function() {
                 $( this ).dialog( "close" );
                   }
                }

});                                                                                                                  

      jQuery('#confirmBox').dialog('open');

Q2. How to set End Date should not be less than Start Date using jQuery Date Picker?

A2. There are mainly 2 kind of validation conditions which are

• Start date should not greater than end date.
• End date should not less than start date.

So let’s put 2 textboxes “txtFromDate” and “txtToDate” and assign Date picker to it. With jQuery UI Date picker, there is an event “onSelect” which fires when any date is selected. So using this event, set the date range for other date pickers.
For example, when from date is selected, then using this “onSelect” event we will set the “minDate” attribute of “txtToDate” textbox to the selected date in “txtFromDate”. What it does is that, dates less than the selected from date will be disabled in “txtToDate” textbox. And same way set the “MaxDate” attribute for “txtFromDate” in onSelect event of “txtToDate” textbox. Below is the complete jQuery code.

$(document).ready(function(){ 
   $("#txtFromDate").datepicker({
        numberOfMonths: 2, 
       onSelect: function(selected) { 
         $("#txtToDate").datepicker("option","minDate", selected)
        }   
 });   
$("#txtToDate").datepicker({ 
       numberOfMonths: 2,   
     onSelect: function(selected) {
         $("#txtFromDate").datepicker("option","maxDate", selected)       
 }   
 }); 
});

“numberOfMonths” attribute allows to display multiple months in date picker.

Q3. How to disable future dates in Date Picker using jQuery?

A3.  The datepicker has the maxdate property that you can set when you initialize it.

$("#datepicker").datepicker({
 maxDate: new Date,
 minDate: new Date(2003, 1, 12)
});

Similarly past dates can also be disabled by setting minDate : new Date.