Adjust the time display to show in the format of hours, minutes, and seconds

Question

Adjust the time display to show in the format of hours, minutes, and seconds

In my Django API served with django-rest-framework, I am sending a movie object along with its related information to a Vue app. One piece of information included is the movie duration.

Movie Object:

{
    "movie_id": 13,
    "duration": "17:52:14",
    ...
    ...
},

Component Template:

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration}}</p>
</div>

The duration is in the format

HH:MM:SS

eg: 02:22:08

However, I would like it to be displayed as

2h 22m

Is there a way to achieve this formatting in either Django, Vue.js, or JavaScript?

Update:

I attempted to use a global filter

Main.js:

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
    filters: {
        durationFormat(value) {
            const duration = moment.duration(value);
            return duration.hours() + 'h ' + duration.minutes() + 's';
        }
    }
}).$mount('#app');

Inside the component template:

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration | durationFormat}}</p>
</div>

But I encountered an error:

[Vue warn]: Failed to resolve filter: durationFormat (found in anonymous component - use the "name" option for better debugging messages.)

javascript django vuejs2 vue.js

Answer 1

Answer №1

If you're looking to enhance your Vue application, consider utilizing a Vue filter. For more information on filters, check out the details here. Filters can be registered either globally or locally within your component.

Take a look at an example of a global filter below:

Vue.filter('formatTime', function(value) {
  if (value) {
    const parts = value.split(":");
    return +parts[0] + "h " + +parts[1] + "m";
  } else {
    return "unknown"
  }
});

Here's how you can implement this filter in your template:

<p>Duration: {{movie.duration | formatTime}}</p>

Keep in mind that you can tailor the formatting function to suit your needs. The provided sample is just a starting point to illustrate how filters can be used effectively in Vue. Additionally, consider exploring the capabilities of the moment.js library for advanced date/time handling.

Check out this codepen example, which incorporates moment.js as well.

Update (in response to comment)

To register the filter in your main.js file, you can follow this approach:

// register global filter
Vue.filter('durationFormat', function(value) {
  const duration = moment.duration(value);
  return duration.hours() + 'h ' + duration.minutes() + 's';
});

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
}).$mount('#app');

Answer 2

If you're looking to enhance your Vue application, consider utilizing a Vue filter. For more information on filters, check out the details here. Filters can be registered either globally or locally within your component.

Take a look at an example of a global filter below:

Vue.filter('formatTime', function(value) {
  if (value) {
    const parts = value.split(":");
    return +parts[0] + "h " + +parts[1] + "m";
  } else {
    return "unknown"
  }
});

Here's how you can implement this filter in your template:

<p>Duration: {{movie.duration | formatTime}}</p>

Keep in mind that you can tailor the formatting function to suit your needs. The provided sample is just a starting point to illustrate how filters can be used effectively in Vue. Additionally, consider exploring the capabilities of the moment.js library for advanced date/time handling.

Check out this codepen example, which incorporates moment.js as well.

Update (in response to comment)

To register the filter in your main.js file, you can follow this approach:

// register global filter
Vue.filter('durationFormat', function(value) {
  const duration = moment.duration(value);
  return duration.hours() + 'h ' + duration.minutes() + 's';
});

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
}).$mount('#app');

Answer 3

Answer №2

One way to achieve this is by implementing a simple JavaScript code:

var currentTime = "02:22:08";
var convertedTime = parseInt(currentTime.split(':')[0]) + 'h' + ' ' + parseInt(currentTime.split(':')[1]) + 'm';

Answer 4

One way to achieve this is by implementing a simple JavaScript code:

var currentTime = "02:22:08";
var convertedTime = parseInt(currentTime.split(':')[0]) + 'h' + ' ' + parseInt(currentTime.split(':')[1]) + 'm';

Answer 5

Answer №3

If you're looking for a different approach, consider using the format() method in JavaScript.

function customFormat(time){
        return time.replace(/(?:0)?(\d+):(?:0)?(\d+).*/,'$1h $2m');
}

["20:45:30","05:15:10"].forEach(function(time){
  console.log(time+" ==> "+customFormat(time));
});

Answer 6

If you're looking for a different approach, consider using the format() method in JavaScript.

function customFormat(time){
        return time.replace(/(?:0)?(\d+):(?:0)?(\d+).*/,'$1h $2m');
}

["20:45:30","05:15:10"].forEach(function(time){
  console.log(time+" ==> "+customFormat(time));
});

Answer 7

Answer №4

You have the ability to create your own custom template tag in Django:

from django import template

register = template.Library()

@register.simple_tag
def convert_time(value):
    t_list = [t for t in value.split(':')]
    return '{}h {}m'.format(int(t_list[0]), t_list[1])

Once you've created your custom tag, you can easily incorporate it into your templates:

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

To learn more about creating custom tags, refer to the Django documentation.

Answer 8

You have the ability to create your own custom template tag in Django:

from django import template

register = template.Library()

@register.simple_tag
def convert_time(value):
    t_list = [t for t in value.split(':')]
    return '{}h {}m'.format(int(t_list[0]), t_list[1])

Once you've created your custom tag, you can easily incorporate it into your templates:

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

To learn more about creating custom tags, refer to the Django documentation.

Answer 9

Answer №5

If you want to customize how duration is displayed in Django, you can create a tag filter and add it to your tagfilter.py file:

from django import template
register = template.Library()

@register.filter
def tagFilter(duration):
    d = duration.split(":")
    hh,mm,ss = d[0],d[1],d[2]
    return "%sh %sm %ss" % (hh,mm,ss) # If you prefer not to display seconds, you can remove them:
    # "%sh %sm" % (hh,mm)

In your Django template, use the tag filter like this:

<div id="movieDetailSynopsis">
...
...
<p>Duration: {{movie.duration|tagFilter}}</p>

Answer 10

If you want to customize how duration is displayed in Django, you can create a tag filter and add it to your tagfilter.py file:

from django import template
register = template.Library()

@register.filter
def tagFilter(duration):
    d = duration.split(":")
    hh,mm,ss = d[0],d[1],d[2]
    return "%sh %sm %ss" % (hh,mm,ss) # If you prefer not to display seconds, you can remove them:
    # "%sh %sm" % (hh,mm)

In your Django template, use the tag filter like this:

<div id="movieDetailSynopsis">
...
...
<p>Duration: {{movie.duration|tagFilter}}</p>

Adjust the time display to show in the format of hours, minutes, and seconds

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to retrieve the object of the selected option from a single select input in Angular

Tips for displaying average progress using a progress bar

Guide to creating JSDoc for a TouchEvent handler

Firestore data displaying as null values

Proficient in transforming arrays into objects

I would greatly appreciate it if someone could provide an explanation of how Automatic Global Registration of Base Components works in

What are the benefits of using Wagtail's ModelAdmin inline feature?

How to Use $scope within a Function in AngularJS

Avoid triggering the parent modal to close when a child element is clicked in VueJS

Seeking assistance with setting up BxSlider installation

What sets TypeScript apart from AtScript?

Is there a way to automate the duplication/copying of files using JavaScript?

React: Basic To-Do List Application, Issue with Checkbox Not Refreshing

The significance of using `jshint globalstrict: true` alongside 'use strict'

"react commands" are not recognized as an internal or external command by any program or batch file

Showing data from a JavaScript controller's JSON response in an HTML table

When attempting to launch the Ember Cordova application on the mobile device, an error was encountered stating: "Unable to access property 'notification' as it is

How to extract data from an alert in an Ionic application

What are the steps to display a graph on a webpage using AJAX in Django?

Error in syntax: An unexpected token was encountered during an AJAX request