Displaying two different dates in AngularJS without any repetition of the similar elements

Question

Displaying two different dates in AngularJS without any repetition of the similar elements

How can I elegantly display a date range that includes two dates, without repeating information if it's the same for both dates? My idea is something like this:

Tue, 05 May 2015 19:31-20:31 GMT

Mon, 04 19:31 - Tue, 05 20:31 May 2015

It's acceptable if there is some overlap, for example:

Mon May 4th, 19:31 - Tue May 5th, 20:31 2015

The aim is to create a visually appealing format for users. I'm unsure of how to tackle this - currently I only know how to display both full dates. Despite my research, I have not found a solution - plenty on formatting individual dates, but nothing when it comes to combining two dates.

I am utilizing AngularJS, but if you have a solution that doesn't rely on Angular, that would work as well.

javascript angularjs datetime

Answer 1

Answer №1

Your query indicates a desire to format a date range in AngularJS. However, from my perspective, this appears to be a more general Javascript inquiry unless you are specifically looking for an elegant solution using Angular filters.

I recommend utilizing MomentJS, which offers a myriad of utility functions for formatting and comparing dates. Alternatively, moment-range could provide helpful methods, although it may lack certain formatting capabilities.

var date1 = momentjs('2015-05-05 12:15');
var date2 = momentjs('2015-05-10 12:15');

These dates encompass overlapping years, months, and times. You can check for this using date1.isSame(date2, 'year'). Repeat this process for month, date, time, etc.

To format your range, utilize

date1.format(...) + ' - ' + date2.format(...)

, depending on the shared date properties.

If desired, encapsulate all code within an Angular filter:

angular.module('myApp').filter('dateRange', function () {
  return function (date1, date2) {
    // handle date range logic here
  };
});

Implement the filter within your template after setting date1 and date2 on the $scope

{{date1 | dateRange:date2}}

Answer 2

Your query indicates a desire to format a date range in AngularJS. However, from my perspective, this appears to be a more general Javascript inquiry unless you are specifically looking for an elegant solution using Angular filters.

I recommend utilizing MomentJS, which offers a myriad of utility functions for formatting and comparing dates. Alternatively, moment-range could provide helpful methods, although it may lack certain formatting capabilities.

var date1 = momentjs('2015-05-05 12:15');
var date2 = momentjs('2015-05-10 12:15');

These dates encompass overlapping years, months, and times. You can check for this using date1.isSame(date2, 'year'). Repeat this process for month, date, time, etc.

To format your range, utilize

date1.format(...) + ' - ' + date2.format(...)

, depending on the shared date properties.

If desired, encapsulate all code within an Angular filter:

angular.module('myApp').filter('dateRange', function () {
  return function (date1, date2) {
    // handle date range logic here
  };
});

Implement the filter within your template after setting date1 and date2 on the $scope

{{date1 | dateRange:date2}}

Displaying two different dates in AngularJS without any repetition of the similar elements

Answer №1

Similar questions

Using `getJson` to parse the tree structure

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

How to selectively import specific modules in three.js using ES6 syntax

Send data in JSON format from an AngularJS client to an Express server

Error: THREE.MTLLoader is not a constructor, version 3.0 bug uncovered

The output generated by the array_unique function

JavaScript: Efficiently Sorting a Multidimensional Array

FullCalendar dayClick event fails to trigger any action

Ways to conceal buttons according to your 'occupation'?

The requested `GLIBC_2.28' version required by node cannot be located, leading to an inability to amplify the version

Node.js script terminated: Process concluded with an exit code 139 due to being interrupted by signal 11 (SIGSEGV)

There seems to be an issue preventing the Chrome browser from launching with the error message: "ERROR: connect ECONNREFUSED 127.0

Determine your age by manually inputting your date of birth

The never-ending scrolling problem: Autoscroll refusing to halt - a perplexing conundrum in the world

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

Java services causing JDE BSFN to throw errors

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

Open boxes with walls that don't create shadows