jquery how to how to get key and value in an associative array

Question

Hi all, here's my problem. I have a datepicker which has only some dates enabled based on 3 sets of arrays. onSelect I retrieve the available date I clicked. Now things get complicated. The array with the available dates needs to be an associative array with id and date as 'key' and 'value'. How do I retrieve the id associated with the available date I clicked on?

Here's my code so far:

function calendar(){

    function datePicker(array){
        $j("#datepicker").datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: $j.datepicker.parseDate('ddmmyy', array[0]), //this makes the datepicker start at the first available
            beforeShowDay: function(dateToShow){
                if ($j.inArray($j.datepicker.formatDate('ddmmyy', dateToShow),array) !== -1) return [1, 'my-class', 'Available date!'];
                else return [0, 'no-class', 'Date not available!'];

            },
            //get the selected date
            onSelect: function(dateText) {
                var dateAsString = dateText; //the first parameter of this function

                //var dateAsObject = $j(this).datepicker( 'getDate' ); //the getDate method
                $j('#getDate').text(dateAsString);
            }

        });
    }


    $j('.book-pack a.button').each(function(){

        //getting the button id
        var btnId = $j(this).attr('id');

        //arrays with available dates for the 3 packs
        var datesClub = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010');
        var datesEssential = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010');
        var datesFling = new Array('08102010', '09102010', '15102010', '16102010', '22102010', '23102010', '29102010', '30102010');


        $j(this).click(function(){

            switch(btnId)
            {
                case 'club-class':
                    $j('.window h2.page-title').text('Club Class');
                    datePicker(datesClub);
                    break;
                case 'essential':
                    $j('.window h2.page-title').text('The Essential Experience');
                    datePicker(datesEssential);
                    break;
                case 'last-fling':
                    $j('.window h2.page-title').text('Last Fling Before the Ring');
                    datePicker(datesFling);
                    break;
            }

            return false;
        });
    });


}

Any idea?

Thanks in advance,

Mauro

Answer 1

Try something like this (demo):

This script creates an array of dates from the associative array (object). It was easier to switch the key: value pairs so that the date was the key and the value was the id, but I think it gets the idea across.

function calendar() {

    function datePicker(pack) {
        // create array of dates from pack
        var i, array = [];
        for (var i in pack) {
            array.push(i);
        }
        $j("#datepicker").datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: $j.datepicker.parseDate('ddmmyy', array[0]),
            //this makes the datepicker start at the first available
            beforeShowDay: function(dateToShow) {
                return ($j.inArray($j.datepicker.formatDate('ddmmyy', dateToShow), array) !== -1) ? [1, 'my-class', 'Available date!'] : [0, 'no-class', 'Date not available!'];
            },
            //get the selected date
            onSelect: function(dateText, inst) {
                var dateAsString = dateText,
                    //the first parameter of this function
                    dateCompressed = (dateText).replace(/-/g, ''); // dd-mm-yyyy -> ddmmyyyy
                $j('#getDate').text(dateAsString);
                $j('#getId').text(pack[dateCompressed]);
            }

        });
    }


    $j('.book-pack a.button').each(function() {
        //getting the button id
        var btnId = $j(this).attr('id');
        //arrays with available dates for the 3 packs
        var datesClub = { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' };
        var datesEssential =  { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' };
        var datesFling =  { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' };

        $j(this).click(function() {
            switch (btnId) {
            case 'club-class':
                $j('.window h2.page-title').text('Club Class');
                datePicker(datesClub);
                break;
            case 'essential':
                $j('.window h2.page-title').text('The Essential Experience');
                datePicker(datesEssential);
                break;
            case 'last-fling':
                $j('.window h2.page-title').text('Last Fling Before the Ring');
                datePicker(datesFling);
                break;
            }
            return false;
        });
    });
}