ionic-nav-view with 'next' option

As I am advancing with Ionic programming, I have come to find this problem which I don't know how to solve best. The thing is that I want to show on the header (or preferably on the sub-header) this:

< yesterday TODAY tomorrow>

So users will start the App on today's page and can navigate to previous and next days (it is a calendar-like app). I was planning to do this using two buttons for 'yesterday' and 'tomorrow' and just change text for buttons and title upon page change using the controller. Nevertheless, I have found out the ion-nav-view and was wondering if, somehow, I can adapt it to mimic my desired behavior. It does include the back option but not the forward one... The question is, can this be done?. Has anyone managed to do something like I am attempting here?.

Thanks in advance.

Jose

Solution

Here is the code that shows the solution I have reached. It does work for me.

HTML:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>My App</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <!-- ionic/angularjs js -->
  <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>

  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="MyCtrl">
    <div align-title="center" class="bar bar-header bar-stable">
      <button class="button button-clear ">Menú</button>
      <button class="button button-clear">Right</button>
    </div>
    <div class="bar bar-subheader">
      <button class="button icon-left button-clear button-dark" ng-hide="hidePrevious" ng-click="previousDay()"><i class="icon ion-chevron-left"></i> {{previousDayTitle}} </button>
      <h1 class="title"><span style="font-size:35px"> {{todayTitle}} </span></h1>
      <button class="button icon-left button-clear button-dark" ng-hide="hideNext" ng-click="nextDay()"> {{nextDayTitle}} <i class="icon ion-chevron-right"></i></button>

    </div>
    <ion-content class="has-header has-subheader">jjjh sss
      <br> sasas asasa
      <br> sasas
    </ion-content>
    <!--<div class="bar bar-footer bar-balanced">
      <ion-checkbox ng-model="isChecked">Programa</ion-checkbox>
      <ion-checkbox ng-model="isChecked">Alternativo</ion-checkbox>
      <ion-checkbox ng-model="isChecked">Taurina</ion-checkbox>
    </div>-->
  </div>


</body>

</html>

JS:

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.title = 'Ionic';

  // 20 August - 27  August, both included
  firstFairDay = new Date(2016, 7, 20);
  lastFairDay = new Date(2016, 7, 27);

  now = new Date(2018, 1, 1);

  weekDays = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];

  if (now.getTime() >= lastFairDay.getTime()) {
    $scope.hidePrevious = false;
    $scope.hideNext = true;
    now = new Date(lastFairDay);
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
  } else if (now.getTime() <= firstFairDay.getTime()) {
    $scope.hidePrevious = true;
    $scope.hideNext = false;
    now = new Date(firstFairDay);
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
  } else {
    $scope.hidePrevious = false;
    $scope.hideNext = false;
    todayDayOfWeek = weekDays[now.getDay()];
    todayDayNumber = now.getDate();
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
  }

  $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;

  $scope.previousDay = function() {
    if (now.getTime() === firstFairDay.getTime()) {
      // Do nothing
    } else {
      now.setDate(now.getDate() - 1);
      todayDayNumber = now.getDate();
      todayDayOfWeek = weekDays[now.getDay()];

      if (now.getTime() === firstFairDay.getTime()) {
        $scope.hidePrevious = true;
        $scope.hideNext = false;
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      } else {
        $scope.hidePrevious = false;
        $scope.hideNext = false;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      }
    }
  };

  $scope.nextDay = function() {
    if (now.getTime() === lastFairDay.getTime()) {
      // Do nothing
    } else {
      now.setDate(now.getDate() + 1);

      todayDayNumber = now.getDate();
      todayDayOfWeek = weekDays[now.getDay()];

      if (now.getTime() === lastFairDay.getTime()) {
        $scope.hidePrevious = false;
        $scope.hideNext = true;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
      } else {
        $scope.hidePrevious = false;
        $scope.hideNext = false;
        $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1);
        $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber;
        $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1);
      }
    }
  };



});

Cheers