Сохранить выбранный цвет, нажав даже после перезагрузки страницы с помощью Javascript

0

В моей подборке даты вы можете выбрать дату и время. Я использую Javascript. Вы можете выбрать дату и время, нажав. После выбора даты вы перейдете на страницу времени. После выбора времени из временных интервалов дата и время будут отправляться на сервер. Я хочу выделить выбранные дату и время с красным цветом, даже после перезагрузки цвет страницы должен быть там. Дата также должна быть подсвечена. Итак, если вы вернетесь, тогда цвет подсветки также должен быть выделен. Главное, я хочу сохранить цвет где-нибудь, поэтому, если я перезагружу страницу, тогда я должен увидеть цвет. Здесь моя дата и время получают JS-код, и я добавил плункер ниже.

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', '$http', 'formatDateTime', '$filter', function($scope, $http, formatDateTime, $filter) {
    
    $scope.showType = 1;
    $scope.selected = {};
    
    $scope.changeShowType = function (type) {
  $scope.showType = type;
  $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy');
};
    
    $scope.selectDate = function(date) {
      console.log(date);
        $scope.showType = 2;
        $scope.selected.date = date;
        $scope.monthName = $filter('date')(date, 'dd MMM yyyy');
    };
    
    $scope.selectTime = function(time) {
        $scope.selected.time = time;
        $http.post('date/selected', $scope.selected);
    };

    var getTimeValues = function() {
        formatDateTime.getTimeValues();
    }
    getTimeValues();

    var bindScope = function() {
        $scope.timeValues = formatDateTime.timeValues;
    }

    bindScope();

    //Date Picker START

    var date = new Date();
    var months = [],
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var tempMonth;
    tempMonth = date.getMonth();
    for (var i = 0; i <= 12; i++) {
        months.push(monthNames[tempMonth] + ' ' + date.getFullYear());
        tempMonth += 1;
        if (tempMonth >= 12) {
          tempMonth = 0;
          date.setFullYear(date.getFullYear() + 1);
        }
    }
    $scope.year = 2015;
    $scope.changeMonth = function(steps) {
        if ($scope.monthIndex + steps >= 0 && $scope.monthIndex + steps <= 12) {
            $scope.dateValues = [];
            $scope.monthIndex = $scope.monthIndex + steps;
            $scope.monthName = $scope.months[$scope.monthIndex];
            var date = new Date();
            console.log(date.getMonth());
            var offset = date.getMonth()
            console.log($scope.monthIndex);
            var offsetDate = offset + $scope.monthIndex;
            $scope.nDays = new Date($scope.year, offsetDate + 1, 0).getDate();
            console.log(offsetDate + 1);
            console.log(new Date($scope.year, offsetDate, 1));
            for (i = 1; i <= $scope.nDays; i++) {
                var d = new Date();
                d.setHours(0, 0, 0, 0);
                var displayDate = new Date($scope.year, offsetDate, i);
                if (displayDate >= d) $scope.dateValues.push(displayDate);
            }

        } else {
            console.log("missed")
        }
        
        $scope.showType =1;
    };

    $scope.monthIndex = 0;
    $scope.months = months;
    $scope.monthName = months[0];
    $scope.changeMonth(0);


}]);

datepicker.factory('formatDateTime', [function() {
    return {
        //final structures which are bound to view
        //
        dateValues: [],
        timeValues: [],

        //generates one hour slots between minTime and maxTime
        getTimeValues: function() {
            console.log('here i am');
            var timeValues = this.timeValues;
            var minTime = 11; //vary this to change the first service slot available
            var maxTime = 19; //vary this to chage the last service slot available
            var string;
            for (var i = minTime; i < maxTime; i++) {
                if (i < 12) {
                    lowersuffix = 'AM';
                    startRange = i;
                } else if (i === 12) {
                    lowersuffix = 'PM';
                    startRange = i;
                } else {
                    lowersuffix = 'PM';
                    startRange = i - 12;
                }
                if ((i + 1) < 12) {
                    uppersuffix = 'AM';
                    endRange = (i + 1);
                } else if ((i + 1) === 12) {
                    uppersuffix = 'PM';
                    endRange = (i + 1);
                } else {
                    uppersuffix = 'PM';
                    endRange = (i + 1) - 12;
                }
                string = startRange + lowersuffix + '-' + endRange + uppersuffix;
                console.log(string);
                timeValues.push(string);
            }
        }
    };
}]);

Ссылка на Plunker: - http://plnkr.co/edit/35UwiYLEqv3LYY6RiL1q?p=preview

  • 0
    localStorage может помочь вам сохранить данные на страницах :)

2 ответа

1

вы можете использовать файлы cookie для хранения значений

document.cookie="username=John Doe";

W3Schools Cookies

  • 0
    Я пробовал эти вещи, не работает. Не могли бы вы обновить Plunker?
0

Если ваш целевой браузер поддерживает localStorage, я бы порекомендовал:

localStorage.setItem("colour", "blue");
localStorage.getItem("colour");
  • 0
    Я пытался, не работает. Не могли бы вы обновить Plunker?
  • 0
    plnkr.co/edit/GMM3nutbG1tnHx5pbgWt?p=preview Я добавил set и получил локальную переменную хранения в функции setDate. После обновления страницы «Я тестовая строка!» показывает в консоли. Если я правильно понимаю, постоянство переменной было вашей проблемой?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню