The back-end returns me a timespan in the following format as a string:
00:31:07.2764147
I need to interpretate that string and return a countdown.
Currently I am using vue 2:
<div v-if="this.time">
<countdown :time="this.time">
<p>Time Remainingļ¼ {{ this.time.minutes }} minutes, {{ this.time.seconds }} seconds.</p>
</countdown>
</div>
data () {
return {
time: '00:00.00'
}
}
In my method I have this:
this.time = moment(res.data.resetOtpRetriesTimestamp).format('HH:mm:ss')
Currently this returns invalid date.
I have tried to find any documentation but there is nothing there that can translate timespan to minutes and seconds and start a countdown timer which is my goal here.
I do understand that I can parse the string, I was rather looking for some easy moment function or syntax to do it.
Any ideas are welcome.
Related
Here's my code:
<div v-for="(message) in messages">
<div class="message-divider sticky-top pb-2" data-label="Test"> </div>
...
What I need to achieve is, if current iteration's message.createdAt.seconds differs by day from the previous one to show message-divider element.
So the time format is in seconds like this: 1621515321
How can I achieve this?
You can do variable assignment as part of the template, so you could assign the previous value and compare, but this is not a very good idea. Instead you can use a computed to prepare your array to only have the objects you want, with the data you need. So in this case, you could use a computed to create a new array with objects that have additional flags like className or showDivider etc.
example:
computed:{
messagesClean(){
let lastCreatedAt;
return this.messages.map(message => {
const ret = {
...message,
showDivider: lastCreatedAt + 3600*24 < message.createdAt.seconds // your custom logic here
}
lastCreatedAt = message.createdAt.seconds
return ret
}
}
}
the logic to determine when the divider gets shown is up to you there, I suspect it may be a bit more complicated than differing by a day.
You need something like this:
<div v-if="compEqRef">
OK
</div>
<div v-else >!!OK!!</div>
Here compEqRef could be in computed:
computed: {
compEqRef() {
//do something
}
},
I have a component that gets makes an API call when the component mounts and gets a time in seconds (example: 2313). It is the only API call made so I want to take those seconds and convert it to a HH:MM:SS time and count up each second. I assume I'll need to make a method that takes the seconds when the data comes in but I don't know what to do from that points.
mounted() {
axios.get('')
.then(response => {
this.seconds = response.timeInSeconds;
})
},
data: {
return() {
seconds: null,
}
},
watch: {
seconds(newVal) {
if (newVal != null) {
// ????
}
}
}
You will need to do a couple of things.
Firstly, you will need to use SetTimeout function to run every second, and when it runs it just increments your this.seconds property. This timeout function should be set in your ajax response, and it should call itself so it runs again. Thinking more about it, you are probably better to just use the current datetime value and calculate the difference as running the timeout function may get out of time, depends how long it will run for. Whereas taking the difference from the current time and the time it ran will let you know how many seconds to add, and it will be in perfect sync with the clock.
Secondly, you will need a computed function to take those seconds and convert it to HH:MM:SS. There are libraries for this, but you can just use a combination of modulus and remainder to calculate the hours and minutes. 3600 seconds in an hour (60*60) etc.
I am using Bootstrap Vue and more specifally the formdatepicker.
It's looking like this:
<b-form-datepicker
v-model="user.birthdate"
class="mb-2"
:max="maxBirthdate"
:placeholder="$t('birthdate_field_placeholder')"
:show-decade-nav="true"
/>
I want to restrict the max date to be 16 years ago from today.
So I use this code:
created () {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let todayMinusSixteenYears = new Date(today)
todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)
this.maxBirthdate = todayMinusSixteenYears
},
When I then start my Nuxt app, I am getting the following error:
[Vue warn]: Invalid prop: type check failed for prop "max". Expected String, Date, got Date
found in
---> <BCalendar>
<BVFormBtnLabelControl>
<BFormDatepicker>
<Anonymous>
<BFormGroup>
<FormControlWrapper> at components/form/FormControlWrapper.vue
<ValidationObserver>
<Pages/register/volunteer.vue> at pages/register/volunteer.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
I'm not sure where or what the error is, since the variable is definitely a Javascript Date.
When trying to put .toString() at the end, it does not work at all anymore.
Please note, that even though the application is giving the error as shown, it does work perfectly with the Javascript Date object.
Without the full script (especially the data object) I can't say what is the root of your issue here, but going off of the Bootstrap Vue demo, the code below works. What you're likely experiencing is a conflict between created function and whatever you have in data
<script>
export default {
data() {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let todayMinusSixteenYears = new Date(today)
todayMinusSixteenYears.setFullYear(todayMinusSixteenYears.getFullYear() - 16)
return {
value: '',
maxBirthdate: todayMinusSixteenYears,
}
}
}
</script>
I faced a problem while trying to calculate between 2 different times.
I am using vue-moment, and i tried to calculate the time with diffs but with no success.
data() {
return {
date: moment('12-11-2019').format("DD-MM-YYYY"),
date2: moment('13-11-2019').format("DD-MM-YYYY"),
startTime: this.date.diff(this.date2)
what is the right way of using moment in data and methods?
P.S.
i want to calculate the hours also and parse it with the date in the same argument, but i couldnt do it right.
You should be able to make it work with a computed property no problem:
computed: {
startTime() {
return this.date.diff(this.date2);
}
}
Working example
I'm pulling a JSONP date for different events and workshops from RegOnline, which gives me:
/DATE(1408545000000)/
I'm using Handlebars to list the different events, and I'm attempting to use MomentJS as a registerHelper. objs is the array of objects I'm pulling from RegOnline:
function bindEvents(objs) {
Handlebars.registerHelper('formatDate', function(objs){
return new Handlebars.SafeString(
moment(objs.StartDate).format("LL")
);
});
var eventHost = $("#eventHost").html();
var eventTpl = Handlebars.compile(eventHost);
$(".event-list").append(eventTpl(objs));
}
Here's my template:
<span class="timestamp">{{City}}, {{State}} - {{formatDate StartDate}}</span>
This gives me the current date, instead of the date of the event. What am I missing?
Figured it out! I didn't need to define objs.StartDate in the Moment line. Handlebars takes care of that for me, so I just needed to use objs.