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

Post Comment This is for short comments only. Use the forum for more discussions.

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 All rights reserved worldwide Privacy Policy Disclaimer