[datepicker] active state on every first day of the month

[marco-gagliardi]

Don't know if that's the intended behavior anyway it seems weird to me that while navigating on and back through the months, day one is always marked as active (and couldn't find an option to disable this behavior). To see it open this page: http://plnkr.co/edit/F3cu3Fed6DhgjxJnxT0J?p=preview and click on the right arrow over and over...

[wesleycho]

I would say this is a minor UX bug since if you select any other date and then navigate, the active behavior does not trigger. PRs fixing this are welcome.

[viros]

Found next code:
$scope.move = function( direction ) {
var year = self.activeDate.getFullYear() + direction * (self.step.years || 0),
month = self.activeDate.getMonth() + direction * (self.step.months || 0);
self.activeDate.setFullYear(year, month, 1);
self.refreshView();
};
It's really weird, why it's needed at all?

[wesleycho]

I think part of the problem is that if it is to remain on the currently selected day when changing months/years, there is the possibility of certain days not existing on the new month, such as 31.

The activeDate code looks like it keeps it simple - I would be fine with a PR changing this behavior though, it should be pretty easy to fix if someone wants to file a PR with the appropriate test to cover all edge case dates.

[johnnybaloney]

TL;DR
Both current implementation and the suggested PR don't seem right. The highlight (a.ka. active day which != selected day) should be scrapped altogether (with the exception of 'today'). All the problems with it are listed below.

---

@wesleycho It took me a while to realise what was the problem you were referring to. I think I know now but I don't understand why anyone would want the active day to follow you as you switch between months. What is the thinking behind this idea?

I can see that some other pickers try to do it like that, e.g. pickadate, while some don't, e.g. jQuery datepicker. From an end user perspective who uses a datepicker for a few seconds and moves on I find the pickadate (and current angular ui) behaviour confusing - why when I select 13th February does it highlight 13th March for me? Has the selection changed? Is it broken? And then if I indeed want to select 13th March I have to click on the cell that appears to have already been clicked.

Also with the current implementation you get strangeness like this. If you select 1st February 2017 and then go back to January both 1st Jan and 1st Feb appear selected. You could argue that normally styling solves the problem (for clarity - I don't think so at any rate) but here it actually is part of the problem as clearly 1st January looks selected but it isn't.

Personally I think it should work like this (jQuery way). Initially the current day is selected. As you move through months nothing happens. Then you select a different date. As you move through the months nothing happens still. This removes the potential confusion in folks like me, the need for some complex edge case logic/testing, and strange workaround solutions like selecting the first day of the month (current implementation) or in the case of the suggested PR inconsistency whereas sometimes you get a day selected (or is it highlighted?) and sometimes you don't (e.g. when the previous month had more days than the next).

[wesleycho]

I will talk with a UX professional next week to gather thoughts.

I'm all for simplifying the datepicker naturally :) - I do agree that there likely is complication when it comes to the logic, I need to do some investigation.

[rsangiovanni]

The bug is still there? Any updates?
there are 3 issues:

• navigate days: first day the current month is selected
• navigate months: current month is selected
• navigate years:
  • for forward navigation: current year + 10xN (where N is number of the page forward)
  • for backward navigation: current year - 10xN (where N is number of the page backward)

[jasonhargrove]

Navigating to another month should not have an active class attached to any day by default.

The active class should be applied to a day a user has clicked.

Today's date should have a class that describes that state: today

[jasonhargrove]

I tried to work around this problem using customClass to not resort to manipulating the DOM directly. That function doesn't offer anything particular to activeDate which seems like another issue.

For that I opened up PR #5812 where you can see the change I made to the module. With this change you can work around the design issues, while that discussion unfolds.

An example that doesn't cover all use-cases:

<!-- html directive -->
custom-class="vm.calendar.getDayClass(date, mode, activeDate)"

// controller
vm.calendar.getDayClass = function (date, mode, activeDate) {
  // Custom active class fix
  var activeMonth = new Date(activeDate).getMonth();
  var currentMonth = new Date().getMonth();
  if (activeMonth !== currentMonth) {
    return 'non-current-month';
  }

  // default
  return '';
};

On td.non-current-month button.active, disable the styling. Expand the custom class logic per your own needs. In this case, the enhancement is used to override a design flaw where there is no today class, and active is attached to today, as well as the 1st of every non current month.

[jasonhargrove]

On PR #5812, @icfantv added an idea to this conversation. I'd hope to see this area redesigned a bit in general, while separately also having more ability to override these items via customClass, which is the idea that my above workaround is built on.