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

* indicates required
Subscribe to plus2net

    plus2net.com



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







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    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 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer