Question

I want to set date in Schedule header by putting div id from Calendar Creation function to Header text.

I get id like this $('.dayNumberCellValue').attr('id');, but I have a problem that when you tap on day in calendar, I get the same date to all days, “27” (this is the startDate of my calendar). It seems to me that in $('.dayNumberCellValue').attr('id'); goes the same date, but why, and how the calendar is working fine if he must show only the “27” date in all cells?

Tap function->>

        $('.div-cell').tap(function() {
                            var i;
                            var myDate2;
                              for (i = 0; i < 42; i++) {
                                $('#' + i + 'dayCell').removeClass('tapped');

                                      }

                              $(this).toggleClass(
                                   'tapped');

                              if($(this).hasClass('tapped')){


                                    myDate2 = $('.dayNumberCellValue').attr('id');
                                    $('#MSchedule header h4').text("S - "+myDate2);}

                    });

Calendar creation->

function setCalendar() {

    var cTime = new Date();
    var myDate = months[cTime.getMonth()] + " " + cTime.getFullYear();
    var myDate2 = cTime.getDate() + " " + months[cTime.getMonth()];


    $('#MCalendar header h4').text(myDate);
     $('#MSchedule header h4').text("Schedule  -  " + myDate2)

    var monthView = new Array(42);

    var firstDayOfMonth = new Date(cTime.getFullYear(), cTime.getMonth(), 1);

    while (firstDayOfMonth.getDay() != 1) {

        firstDayOfMonth.addDays(-1);

    }

    var i;

    for (i = 0; i < monthView.length; i++) {


        startDate = new Date(firstDayOfMonth);

        monthView[i] = startDate.addDays(i);

        }


for(var day=0;day<monthView.length;day++){

var needDay=monthView[day].getDate();

var cell = $('#'+day+'dayCell');
var content = '<div class="dayNumberCellValue" id=' +needDay+ '>'
    + monthView[day].getDate()
            + '</div>';
        cell.append(content);}

Answer 1

This line:

myDate2 = $('.dayNumberCellValue').attr('id');

will always get the id value of the first matching element (the first element with the class “dayNumberCellValue” in the document, starting at the top).

You haven’t shown your markup, but if the element you want is inside the tapped element, then within your tap handler you can find it like this:

myDate2 = $(this).find('.dayNumberCellValue').attr('id');

That looks for the first “dayNumberCellValue” element within the this element, which on tap will be the element you’re watching the tap event on.

---

Off-topic: You’ve said you’re always getting “27”, which suggests you’re using “27” as the id of an element. While that’s recently been allowed (by HTML5), it was invalid in HTML 4 and earlier, and remains invalid in CSS. I would recommend not using an ID starting with a digit. In fact, I think I’d probably use a data-* attribute to store the date rather than id.