Date Picker Sample

Choose a date: 

First you have to include the javascript libraries

                <script type="text/javascript" src="../scripts/lib/prototype.js"></script>
                <script type="text/javascript" src="../scripts/lib/scriptaculous.js"></script>
                <script type="text/javascript" src="../scripts/mtg/myui.js"></script>
            

Then you define your html input as usual:

                <label for="arrivalDt">Choose a date:</label> <input type="text" id="arrivalDt">
            

Then you add the following javascript code:

                new MY.DatePicker({
                    input: 'arrivalDt',
                    format: 'dd-MMM-yyyy',
                    initialText : '22-June-2011',
                    validate: function(value, errors) {
                        if (value != null && value.isAfter(new Date())) {
                            errors.push('Selected date is after current');
                            return false;
                        }
                        return true;
                    }
                });
            

Also you can display weeks numbers

Another date: 

                new MY.DatePicker({
                    input: 'anotherDt',
                    format: 'MM/dd/yyyy',
                    showWeek: true,
                    initialText : 'Select a date',
                });
            

Another feature, now you can display more than one month

Departure date: 

                new MY.DatePicker({
                    input: 'departureDt',
                    format: 'dd/MM/yyyy',
                    showWeek: true,
                    numberOfMonths: 2,
                    initialText : 'Departure date'
                });
            

Finally you can have it embedded as you see here:

                new MY.DatePicker({
                    embedded: true,
                    embeddedId: 'selectADate',
                    format: 'dd/MM/yyyy',
                    showWeek: true,
                    numberOfMonths: 2
                });