Home | Contact | About Me

 

MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.

Date Picker Sample


 

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
                });