AngularJS allows users to easily navigate to the next and previous days, years, and

With Angular's date filter, I can easily retrieve the current day, year, and month using $filter.

However, is there a way to access the next and previous days, years, and months as well?

I attempted to write this code but I'm unsure of how to proceed:

$scope.month = $filter('date')(date, 'MMMM');//Returns December or November
$scope.day = $filter('date')(date, 'dd'); //Returns 01-31 respectively
$scope.year = $filter('date')(date,'yyyy');//Returns 2014

$scope.nextYear = Number($scope.year) + 1;
$scope.prevYear = Number($scope.year) - 1;
$scope.nextDay = ?
etc...

Any suggestions on how to achieve this functionality?

Answer №1

One way to achieve this is by using the angular date $filter to format a date as desired, as it does not provide an easier method for manipulation.

For adjusting the day:

var myDate = new Date();
var previousDay = new Date(myDate);
previousDay.setDate(myDate.getDate()-1);
var nextDay = new Date(myDate);
nextDay.setDate(myDate.getDate()+1);

Manipulating the month:

var previousMonth = new Date(myDate);
previousMonth.setMonth(myDate.getMonth()-1);
var nextMonth = new Date(myDate);
nextMonth.setMonth(myDate.getMonth()+1);

Changing the year:

var previousYear = new Date(myDate);
previousYear.setYear(myDate.getFullYear()-1);
var nextYear = new Date(myDate);
nextYear.setYear(myDate.getFullYear()+1);

$scope.month = $filter('date')(myDate, 'MMMM');
$scope.day = $filter('date')(myDate, 'dd');
$scope.year = $filter('date')(myDate,'yyyy');

$scope.nextDay = $filter('date')(nexyDay, 'dd');
$scope.prevDay = $filter('date')(previousDay, 'dd');
$scope.nextMonth = $filter('date')(nextMonth, 'MMMM')
$scope.prevMonth = $filter('date')(previousMonth, 'MMMM')
$scope.nextYear = $filter('date')(nextYear,'yyyy');
$scope.prevYear = $filter('date')(previousYear,'yyyy');

If you anticipate frequent use of this code, consider creating a service to streamline the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for embedding Apache Superset visualizations into an Angular 7 app: Overcoming hurdles with authentication and headers

I am currently working with Apache Superset to create charts. I am looking to embed these charts in my Angular 7 application using an iframe. One major problem I encountered is an authentication failure with the following error message: Refused to display ...

Is there a specific regular expression that can be used for validating Credit Card Expiry dates in Javascript/Ang

I am currently working on a textfield where users can enter their credit card expiry date in the format mm/yy. To ensure the validity of this input, I have implemented JavaScript validation using regular expressions. Here is an example of what I have tried ...

Displaying images in a horizontal row instead of a vertical column when using ng-repeat

I am currently using ng-repeat to showcase a series of images. While I believe this may be related to a CSS matter, I am uncertain. <div ng-repeat="hex in hexRow track by hex.id"> <img ng-src="{{hex.img}}"/> </div> https://i.sstatic ...

Updating new objects in Angular using JavaScript Object-Oriented Programming may not be working

Recently delving into OOP in JavaScript while working on an AngularJS website, I encountered a situation where my object methods were only altering the properties within the class, but not affecting the new object itself. //Class Var Item = function() { ...

Tips for developing a module for node configuration that exclusively exports JSON data

I have a query about creating a node module that specifically exposes JSON files for configuration purposes. While I know I can easily export a JSON object from index.js, I'm exploring better alternatives to expose JSON files from the node module and ...

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

Personalizing Tooltip Component while Hovering on React AG Grid Table (v 18 beta)

I am currently working on a project involving a react ag grid table that is using an older version (18 beta). Due to specific requirements and existing functionality constraints, I am unable to update or migrate to newer versions. As a result, I am looking ...

Creating a custom loading spinner using HTML and CSS

I am looking to create a spinner using just the <input> element. The only element I can utilize is <input type="text" placeholder="Select Date" class="sel1" /> How can I use CSS to implement a basic spinner in this scenario? ...

Having trouble extracting a value from a JSON object in JavaScript

I am encountering an issue while attempting to extract a specific value nested within a JSON object. The API call response is provided below. var responseData = { "statusCode": 200, "body": "{\"Errors\":\"\",\"Message\":n ...

Are there any virtual keyboard options available for Angular development?

Is there a virtual keyboard solution for Angular that is fully compatible with the Angular ecosystem? I have looked into the mottie keyboard with an Angular wrapper, as well as this and this The first option lacks full compatibility with Angular's v ...

One method to retrieve the id from the database when the button is clicked using ajax

In this particular scenario, I am working on a message thread that is inside a modal. The objective is to display a message thread for a specific individual based on their reference number. However, I am encountering an issue in passing the reference numbe ...

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

I am currently utilizing an npm package that lacks type definitions for TypeScript. Specifically, I'm working with the react-google-maps library. Following their recommended approach, I have imported the following components from the package: import ...

What is the best way to retrieve the highest value along with its corresponding text or name from a multidimensional

I am working with a multidimensional array called 'dataArray' which has the following structure. dataArray = [ {name:"Apples", score: 3.5}, {name:"Oranges", score: 3.7}, {name:"Grapes", score: 4.1} ]; My goal is to find the highest score along ...

An error message stating "ReferenceError: str is not defined" was encountered in Firefox while using the Gettext Library

The gettext.js library seems to be giving me trouble. When I try to run the "index.html" file, an error message saying "ReferenceError: str is not defined" pops up. this.LCmessages[lang] = new jsGettext.Parse(str); I'm not sure where the str variabl ...

Getting the inner element of a particular child from the parent div using selenium with javascript

<div class="A"> <svg> ... </svg> <button> <svg> ... </svg> </button> <svg> ... </svg> </div> <div class="A"> <svg> ... </svg> <button> ...

The React application deployed on GitHub Pages is displaying a blank white screen

I developed a simple meme generator app in React.js as an exercise to learn web development, but I am facing issues while trying to host it on Github pages. I followed all the necessary steps such as installing gh-pages with node, updating packages.json wi ...

Using Firebase Functions Express to Retrieve URL Parameters from Paths

How can I extract the unique identifier uid from a URL structure like www.a.com/users/uid? If we have a function: exports.smartlink = functions.https.onRequest((req, res) => Using req.params in this case returns an empty array. However, utilizing req ...

Implementing an AJAX "load more" feature in PHP to retrieve additional data entries

Is there a way to implement a load more button that changes the limit from 0,5 to 0,10 on the second click, and then to 0,15 on the third click, up to a maximum of 0,30? I have been working with PHP and MySQL to retrieve records from the database using th ...

Using eslint for pre-commit hooks in Git

Is there a way to run eslint on files in the pre-commit script when they are in the add stage? I've placed the .eslintrc file in the hooks folder. Additionally, I have the following script: #!/bin/sh # # An example hook script to verify what is abo ...