Vue.js Moment.js - creating counter for time (hours)

JavaScript
1

Hi,
I’m using Moment.js and Element UI and pug <template lang="pug">
I want to achieve “counter” for time (add 1 hour to currentTime).
el-input-number(v-model="value" controls-position="right" @change="handleChange" :min="Number(currentTime)" :max="Number(currentTime + hours)")

Now, is displaying time in long term as pic.
There is any way to achieve this effect?
This is my whole component with data:
Link to codepen.

Thank you for your time :sunny:

2

The easiest way would be to create a new computed property:

plusOneHour() {
  return moment(this.time).add(1, 'hours').format('HH:mm:ss');
},

and:

el-input(v-model="plusOneHour")

As you can see, this is using an el-input.

In your example you are using an el-input-number, which is meant to display a range of numbers. As you are setting the minimum value to Number(new Date()) you’re left with a timestamp. If you want the timestamp to be one hour in the future, declare a data property like so:

data() {
  return {
    plusOneHour: Number(new Date()) + (1000 * 60 * 60)
};

And bind to it accordingly.

HTH

2 Likes
3

Thank you for your time. In this way I have got an error that “The computed property “plusOneHour” is already defined in data.”

4

Yeah, only do one or the other.

Or name the data property different to the computed property.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.