CODEWITHSUNDEEP
angularjsdatepicker
Brent Robinson
Brent Robinson

Reputation: 27

AngularJS Mighty Datepicker weekday order

I am using angular-mighty-datepicker. I want to change the weekday order from Sunday to Saturday to Mon to Sunday.

Example,
Su Mo Tu We Th Fr Sa

to

Mo Tu We Th Fr Sa Su

So I changed the code in the _buildWeek method in the directive from

days = [0, 1, 2, 3, 4, 5, 6].map(function(d) {

to

days = [1, 2, 3, 4, 5, 6, 0].map(function(d) {

the days render correctly at the top but the actual day for each week on the Sunday shifts down, so displays as

Mo Tu We Th Fr Sa Su
30   31  1   2   3   4   29
6     7    8   9  10  11  5
...

You can see the Sunday has got the date of 29 and the 5th which is down a week.

Any ideas how I can fix this?

Many Thanks

Upvotes: 0

Views: 371

Answers (1)

Michal
Michal

Reputation: 26

I've run into the same situation and have found a solution but I don't consider it the best way, rather a workaround.

Same as you, I've changed the order of the days in the array and I put an IF statement to the callback function, where if the day (d) is Sunday, I set the start day to a week in the future. 

day = d === 0 ? moment(start).add(1,'w') : moment(start).add(d, 'days');

So the _buildWeek function now looks like this.

_buildWeek = function(time, month) {
  var days, filter, start;
  days = [];
  filter = true;
  start = time.startOf('week');
  days = [1, 2, 3, 4, 5, 6, 0].map(function(d) {
    var day, withinLimits, withinMonth;

    day = d === 0 ? day = moment(start).add(1,'w') : day = moment(start).add(d, 'days';

    day = moment(start).add(d, 'days');
    withinMonth = day.month() === month;
    withinLimits = _withinLimits(day, month);
    if ($scope.options.filter) {
      filter = $scope.options.filter(day);
    }
    return {
      date: day,
      selected: _isSelected(day) && withinMonth,
      inRange: _isInRange(day),
      disabled: !(withinLimits && withinMonth && filter),
      marker: withinMonth ? _getMarker(day) : void 0
    };
  });
  return days;
};

Hope this helps.

Upvotes: 1

Related Questions