Web Technology Experts Notes

Friday, 6 September 2013

jQuery datepicker first week monday

jQuery DatePicker is a Plugin provided by jQuery.com, This date picker enable user to select the dates like Date of Birth, Date of joining and select two dates. It have excellent feature like change the date format of date, disable the selection of previous date, disable the selection of next year, show the dates picker in different languages like chinse. You can do the lot of custom changes. All custom changes are available in their website.

Now, many different countries use different date format like USA start date with month, Indian start date with day and some country start date with year. This is 100% configurable in the jQuery plugin. you can set the dateFormat while creating the instance of date picker.

By default, the Datepicker opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the Datepicker to a div or span.

While creating the instance of datepicker, you can also change the what day of the week. You can start first day as Sunday OR Monday as per your requirement.n See the Following Example.

Change the first week from Sunday=>Monday

Just set the firstDay:1 which is 0 by default

jQuery('#date').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: "mm/dd/yy", 
    firstDay: 1 
   });

Another Example for multiple date option

$('.date').datepicker({
    constrainInput: true,   // prevent letters in the input field
    minDate: new Date(),    // prevent selection of date older than today
    showOn: 'button',       // Show a button next to the text-field
    autoSize: true,         // automatically re-size the input field 
    altFormat: 'yy-mm-dd',  // Date Format used
    beforeShowDay: $.datepicker.noWeekends,     // Disable selection of weekends
    firstDay: 1 // Start with Monday
})

Demo: http://docs.jquery.com/UI/Datepicker

How to Create A Basic Plugin In JQuery

Today in all web application, We use jQuery plugin like image slider, Date Picker, Table Plugin, Multiple Month Selector and Upload image through Ajax etc.

In our web application we use one OR more jQuery plugins.

jQuery Plugin creation is very simple and interesting once you can learn how to create. To be expert in jQuery plugin you must know the basic of HTML/HTML5/CSS/CSS3 and jQuery. When you start learning plugin, it seems difficult but after continue 1-2hour you will be start understanding and taking quite interest.

today, all web application use jquery plugin whether it is made in PHP OR ASP. Also if you are expert in jQuery and jQuery plugins you have excellent career as a UI developer. today most of MNC companies hiring UI developer because UI developer can handle all UI stuff whether web application is created in PHP or ASP.
So, Start enjoying the creation of jQuery plugin, trust me its quite easy just start with confidence.
Confidence is required in all the fileds....

Following plugins gives you max height/width of div.

<script> 
/** create a jQuery plugin **/
jQuery(document).ready(function(){ 
    jQuery.fn.maxHeight=function(){ 
        var max =0; 
        this.each(function(){ 
            max = Math.max(max, jQuery(this).height()); 
        });     
        return max;  
    }; 

    jQuery.fn.maxWidth=function(){ 
        var max_width =0; 
        this.each(function(){ 
            max_width = Math.max(max_width, jQuery(this).width());                   
        });             
        return max_width; 
    };     
     
});
/** create a jQuery plugin **/


/** How to use a jQuery plugin **/
jQuery(document).ready(function(){
  //alert('Max Height: ' + jQuery('div').maxHeight());
  //alert('Max Width: ' + jQuery('div').maxWidth());
});
/** How to use jQuery plugin **/
 
</script>
<div>
Div 1</div>
<div>
Div 2</div>
<div>
Div 3</div>

Just Copy the Above code snippets and past in any html and access that html through Browser. Just look at once try to understand, you will start understanding.

Friday, 6 September 2013

jQuery datepicker first week monday

Best Related Posts are Following:

How to Create A Basic Plugin In JQuery

Best Related Posts are Following: