You are here
Home >

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.

 JAVASCRIPT

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.

Leave a Reply


Top