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

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Your Rating


Google+

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




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

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