Datepicker previous months weeks displayed

[RobJacobs]

When the current month's starting day is the same as the calendar starting day, the calendar will display 2 weeks for the next month rather than 1 week for the previous month and 1 week for the next month. Here is a plunk demonstrating. The fix I came up with is to modify the daypicker directive - _refreshView function from:

 numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference,

To:

numDisplayedFromPreviousMonth = (difference >= 0) ? 7 - difference : - difference,

But there is a test that expects that sort of layout: datepicker directive moves to the previous month & renders correctly when previous button is clicked. So I'm not sure if the current layout is by design? If the consensus is the current layout is wrong, I would be happy to create a PR and fix this.

[wesleycho]

The Plunk looks empty - can you recreate what is the issue?

[drKnoxy]

This month in the doc's or plunker attached but not really necessary.http://plnkr.co/edit/gTecuspXR1Koojg67paY?p=preview

but to be fair, his proposed correction doesn't work; it adds a row to the top of november, while removing one off the footer

[drKnoxy]

I think the issue might be that the calendar is hardcoded to show 42 days...

[drKnoxy]

something like this would show the calendar like a regular calendar: http://plnkr.co/edit/KDh31y9ptN3DiD9oHK9L?p=preview

relavent chunk of code is in datepicker@_refreshView

  this._refreshView = function() {
    var year = this.activeDate.getFullYear(),
      month = this.activeDate.getMonth(),
      firstDayOfMonth = new Date(this.activeDate);

    firstDayOfMonth.setFullYear(year, month, 1);
    console.log(this.startingDay, firstDayOfMonth.getDay())
    var difference = this.startingDay - firstDayOfMonth.getDay(),
      numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : 0 - difference, // also I added `0-difference` as it was resulting in `-0` which made me uncomfortable
      firstDate = new Date(firstDayOfMonth);

    console.log('num from prev', numDisplayedFromPreviousMonth)
    if (numDisplayedFromPreviousMonth > 0) {
      firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
    }

    // Was hardcoded to 42 with the comment "42 is the number of days on a six-month calendar"
    // Get the num of days in this month
    var daysInMonth = new Date(year, month, 0).getDate();
    // Padd the beginning
    var numDays = daysInMonth + numDisplayedFromPreviousMonth;

    // Padd the end
    var paddingDays = 7 - (numDays % 7);
    numDays += paddingDays;
    console.log(numDays, 'num days used')

    // Use this new, not-hard coded number
    var days = this.getDates(firstDate, numDays);
    for (var i = 0; i < numDays; i ++) {
      days[i] = angular.extend(this.createDateObject(days[i], this.formatDay), {
        secondary: days[i].getMonth() !== month,
        uid: scope.uniqueId + '-' + i
      });
    }

[RobJacobs]

@wesleycho Here is a plunk with my proposed fix, as @drKnoxy mentioned, choosing November - 2015 from the demo page illustrates the problem. I'm not sure why he asserts my fix doesn't work, in my version the calendar matches how Windows presents the calendar for November of 2015. Typically, the calendar is set to display 6 weeks, always. This will allow the user to still choose and see dates from the previous week,

[drKnoxy]

your plunk pads a week onto the front instead of the tail now

[RobJacobs]

@drKnoxy As it should, please see my edited comment above.

[drKnoxy]

maybe this is a preference, or a locale based discrepancy? my mac wants to display the november calendar from nov1 - dec 12, but google calendars is nov 1 - dec 5 jquery ui doesn't even write out the other month's days in a month https://jqueryui.com/datepicker/#inline

[RobJacobs]

Bootstrap Datepicker displays the last week from the previous month: http://www.eyecon.ro/bootstrap-datepicker/

[wesleycho]

Hm, I don't have a huge preference either way as to how it should behave here. It does sound like moving that potential extra week to the front would assist in UX slightly for most cases, but visually isn't as nice.

I think I'm fine with the proposed change.