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

.ui-datepicker-calendar {
    display: none;


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


$(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));



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',


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer