奇数数组值问题

Question

This is crazy and I have no idea why!?

Here is my issue:

When i log calEvent.start I get the right date with the right time, but! when i log the obj calEvent , my start date do not display the time :(.

I do:

console.log('=======addNewEvent=========');
console.log('log of calEvent.start : ' + calEvent.start);
console.log('log of calEvent obj : ');
console.dir(calEvent);
console.log('========================');

and this is what I get:

console.log(calEvent.start)

Fri Oct 25 2013 12:30:00 GMT-0400 (EDT) 

console.log(calEvent)

Object
    date: "2013-10-25"
    date_end: "2013-10-25"
    date_end_hour: "6:30 pm"
    date_start_hour: "5:30 pm"
    end: Fri Oct 25 2013 18:30:00 GMT-0400 (EDT)
    end_date: "2013-10-25"
    end_time: "18:30"
    id: 109
    location: "63"
    presettype: null
    repeat_type: "N"
    start: Fri Oct 25 2013 00:00:00 GMT-0400 (EDT)
    start_date: "2013-10-25"
    start_time: "17:30"
    time_zone: 4
    title: "s"
    type: "C"
    typeClass: "class"
    user_locations: null
    zipcode: "10023"

As you can see the calEvent.start display the right time 12:30:00 but calEvent display the time as 00:00:00

Any idea why this is happening? :(

NOTE: sorry about my english*

========================= [CODE THAT SET calEvent.start ] ==========================

eventSetEvent : function(calEvent, $event, $titleName, $typeName, $typeL) {           
 resetForm($dialogContent);

 $dialogContent.dialog({
    modal: true,
    title: $titleName,
    open: function() {
        $(".j-start-time").timepicker('setTime',  MAIN.calendar.from24To12(MAIN.calendar.getInfoFromDate().hours(calEvent.start) + ':'+ MAIN.calendar.getInfoFromDate().minutes(calEvent.start)) );
        $(".j-end-time").timepicker('setTime',  MAIN.calendar.from24To12(MAIN.calendar.getInfoFromDate().hours(calEvent.end) + ':'+ MAIN.calendar.getInfoFromDate().minutes(calEvent.end)) );
    },
    close: function() {
       $dialogContent.dialog("destroy");
       $('#calendar').weekCalendar("removeUnsavedEvents");
    },
    buttons: {
       save : function() {
            var x = new Date();
                time_zone = x.getTimezoneOffset() / 60;

            calEvent.id = id;
            id++;

            MAIN.calendar.validation();

            if( $typeL == 'C') {
                calEvent.typeClass = 'class';
            } 

            if( $typeL == 'P') {
                calEvent.typeClass = 'private';
            }

            if( $typeL == 'O') {
                calEvent.typeClass = 'available';
            }

            if( $('.error-field').doesExist() ) {
                $('.j-err-msg').fadeIn();
            } else {
                $('.j-err-msg').fadeOut();

                calEvent.date = MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.date_end = $('.j-date').val() != '' ? $('.j-date').val() : MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.date_end_hour = $('.j-end-time').val().toLowerCase();
                calEvent.date_start_hour = $('.j-start-time').val().toLowerCase();
                calEvent.end_date = $('.j-date').val() != '' ? $('.j-date').val() : MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.end_time = MAIN.calendar.getInfoFromDate().hours(calEvent.end) + ':' + MAIN.calendar.getInfoFromDate().minutes(calEvent.end);
                calEvent.presettype = null;
                calEvent.repeat_type = $('.j-radio-repeat:checked').val();
                calEvent.start_date = MAIN.calendar.getInfoFromDate().year(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().month(calEvent.start) + '-' + MAIN.calendar.getInfoFromDate().day(calEvent.start);
                calEvent.start_time = MAIN.calendar.getInfoFromDate().hours(calEvent.start) + ':' + MAIN.calendar.getInfoFromDate().minutes(calEvent.start);
                calEvent.time_zone = time_zone;
                calEvent.title =  $('.j-title').val() ;
                calEvent.type = $typeL;
                calEvent.user_locations = null;
                calEvent.zipcode = $('.j-zipcode').val();

                MAIN.calendar.addNewEvent(calEvent);
                $calendar.weekCalendar("removeUnsavedEvents");
                $calendar.weekCalendar("updateEvent", calEvent);
                $(".ui-dialog-content").dialog("close");                            
            }
       },
       cancel : function() {
          $(".ui-dialog-content").dialog("close");
       }
    }
 }).show();

 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
},

Answer 1

I suspect that you are being deceived by the JavaScript console.

When you log calEvent.start , it logs the actual value of that property at that time.

When you just log calEvent , it only shows you a single line, correct? And then you click the little arrow to expand the object listing, right?

What happens then is the debugger fetches the properties of the calEvent object at the time you expand it , not when you first called console.log(calEvent) .

While I've got you, let's talk about how you can make your code a lot simpler. I'll just give one example: the lengthy function call MAIN.calendar.getInfoFromDate() appears 20 times in this function.

Unless there's some specific reason to do this, you should call the function once, save its return value in a variable, and then use that variable in those 20 places:

eventSetEvent : function(calEvent, $event, $titleName, $typeName, $typeL) {           
 resetForm($dialogContent);
 var info = MAIN.calendar.getInfoFromDate();

 $dialogContent.dialog({
    modal: true,
    title: $titleName,
    open: function() {
        $(".j-start-time").timepicker('setTime',  MAIN.calendar.from24To12(info.hours(calEvent.start) + ':'+ info.minutes(calEvent.start)) );
        $(".j-end-time").timepicker('setTime',  MAIN.calendar.from24To12(info.hours(calEvent.end) + ':'+ info.minutes(calEvent.end)) );
    },
    close: function() {
       $dialogContent.dialog("destroy");
       $('#calendar').weekCalendar("removeUnsavedEvents");
    },
    buttons: {
       save : function() {
            var x = new Date();
                time_zone = x.getTimezoneOffset() / 60;

            calEvent.id = id;
            id++;

            MAIN.calendar.validation();

            if( $typeL == 'C') {
                calEvent.typeClass = 'class';
            } 

            if( $typeL == 'P') {
                calEvent.typeClass = 'private';
            }

            if( $typeL == 'O') {
                calEvent.typeClass = 'available';
            }

            if( $('.error-field').doesExist() ) {
                $('.j-err-msg').fadeIn();
            } else {
                $('.j-err-msg').fadeOut();

                calEvent.date = info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.date_end = $('.j-date').val() != '' ? $('.j-date').val() : info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.date_end_hour = $('.j-end-time').val().toLowerCase();
                calEvent.date_start_hour = $('.j-start-time').val().toLowerCase();
                calEvent.end_date = $('.j-date').val() != '' ? $('.j-date').val() : info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.end_time = info.hours(calEvent.end) + ':' + info.minutes(calEvent.end);
                calEvent.presettype = null;
                calEvent.repeat_type = $('.j-radio-repeat:checked').val();
                calEvent.start_date = info.year(calEvent.start) + '-' + info.month(calEvent.start) + '-' + info.day(calEvent.start);
                calEvent.start_time = info.hours(calEvent.start) + ':' + info.minutes(calEvent.start);
                calEvent.time_zone = time_zone;
                calEvent.title =  $('.j-title').val() ;
                calEvent.type = $typeL;
                calEvent.user_locations = null;
                calEvent.zipcode = $('.j-zipcode').val();

                MAIN.calendar.addNewEvent(calEvent);
                $calendar.weekCalendar("removeUnsavedEvents");
                $calendar.weekCalendar("updateEvent", calEvent);
                $(".ui-dialog-content").dialog("close");                            
            }
       },
       cancel : function() {
          $(".ui-dialog-content").dialog("close");
       }
    }
 }).show();

 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
},

There are additional simplifications you could make, but that will give you a place to start.