Selection of Month & Year by using calendar in JQuery with different date formats and limitations

Date Picker to show calendar for selection of date

Read Date Picker to collect date from a Calendar
Now we will modify the date picker to allow user to collect Month & year from a widget. No date selection is required. Example :

Style Sheet

<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

HTML

<input name='MonthYear' id='MonthYear' class='date-picker' >

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
           onClose: function(dateText, inst) { 
           var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
           var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
           $(this).datepicker('setDate', new Date(year, month, 1));
        }

    });

});
///////////
})
</script>

Selection of Month and Year only from calendar.

To this you can add different date formats as per the list given in Date Picker tutorial
Maximum & Minimum date can be added

defaultDate: '-1m',
maxDate:'1m',

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Date Picker to show calendar for selection of date

Style Sheet

HTML

JQuery

Selection of Month and Year only from calendar.

Subscribe

1

2

3

4