hjortur17

hjortur17

Member Since 2 Years Ago

Grindavík

Experience Points
36,270
Total
Experience

3,730 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
231
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 8
36,270 XP
Nov
29
1 week ago
Activity icon

Replied to Help With Dates

The Santa list is coming from a database. I always want to show the list but only 11th of December start filtering.

Activity icon

Replied to Help With Dates

Figured it out. Thanks for the help - @bugsysha

return this.santas.filter(santa => dayjs('2019-12-01').isBefore(santa.date_on_arrival) &! dayjs(this.today).add(1, 'day').isAfter(santa.date_on_arrival));
Activity icon

Replied to Help With Dates

Of course. So only in December, I want to sort out this list. So in Iceland, first Santa arrives the night before the 12th December and stops the night before the 24th. So for example, if you visit the site 16th of December I want to display the Santa coming that night (so the Santa arriving the night before the 17th). But for example, if I visit the site after the 24th of December I do not want to display any Santa until 1 of January. So only be sorting out this list in December and showing the hole list all year around.

Activity icon

Replied to Help With Dates

Okay, maybe I forgot it. Could you help me?

Nov
28
2 weeks ago
Activity icon

Replied to Help With Dates

I think I mention it in the second paragraph.

Activity icon

Replied to Help With Dates

Okay, no it started to work. But know it's not sorting out Santas who has already arrived.

Activity icon

Replied to Help With Dates

@bugsysha - Your solution is not returning anything. Is there something I'm not doing right or?

leftSantas: function () {
    const december = dayjs().set('month', 11);
    const beginningOfDecember = december.startOf('month').format('DD/MM/YYYY');
    const endOfDecember = december.endOf('month').format('DD/MM/YYYY');

    return this.santas.filter(s => dayjs(beginningOfDecember).isBefore(s.date_on_arrival) && dayjs(endOfDecember).isAfter(s.date_on_arrival));
}

By the way, this is how the dates look like in the database, 12/12/2019, and that's why I'm formating it like DD/MM/YYYY

Activity icon

Replied to Help With Dates

Figured it out, dayjs was not recognizing this string: dayjs().set('month', 11).startOf('month').format('DD/MM/YYYY')

So I changed this:

computed: {
        todaySantas: function () {
            return _.filter(this.santas, ['date_on_arrival', this.today]);
        },

        leftSantas: function () {
            return this.santas.filter(s => this.beginningOfDecember.isBefore(santa.date_on_arrival) && this.endOfDecember.isAfter(santa.date_on_arrival));
        },

        beginningOfDecember: function () {
            return dayjs().set('month', 11).startOf('month').format('DD/MM/YYYY')
        },

        endOfDecember: function () {
            return dayjs().set('month', 11).endOf('month').format('DD/MM/YYYY')
        }
    },

To this:

todaySantas: function () {
    return _.filter(this.santas, ['date_on_arrival', this.today]);
},

leftSantas: function () {
    const december = dayjs().set('year', 2019).set('month', 11);
    const beginningOfDecember = december.startOf('month');
    const endOfDecember = december.endOf('month');

    return this.santas.filter(s => beginningOfDecember.isBefore(s.date_on_arrival) && endOfDecember.isAfter(s.date_on_arrival));
}

And I got the error message away.

Activity icon

Replied to Help With Dates

@bugsysha - That didn't fix it :/ And I'm not sure what is not working and leaving this error.

Activity icon

Replied to Help With Dates

I don't want to use MomentJS because it's too big for this small project. DayJS has a very similar API and takes much less space.

Nov
27
2 weeks ago
Activity icon

Replied to Help With Dates

I've been trying to find a way to use the year, but I get this error: "(error during evaluation)"

So this is what I have:

computed: {
        todaySantas: function () {
            return _.filter(this.santas, ['date_on_arrival', this.today]);
        },

        leftSantas: function () {
            return this.santas.filter(s => this.beginningOfDecember.isBefore(santa.date_on_arrival) && this.endOfDecember.isAfter(santa.date_on_arrival));
        },

        beginningOfDecember: function () {
            return dayjs().set('month', 11).startOf('month').format('DD/MM/YYYY')
        },

        endOfDecember: function () {
            return dayjs().set('month', 11).endOf('month').format('DD/MM/YYYY')
        }
    },
Nov
26
2 weeks ago
Activity icon

Replied to Help With Dates

What changes will that make? I will still need to figure out a way to always display the list and then filter it in December.

Nov
25
2 weeks ago
Activity icon

Started a new Conversation Help With Dates

Hi, so I'm building a website to see when the Icelandic Santas are arriving, but I'm struggling to get the dates to work. So in my database, I have the date set to this format: DD/MM (for example: 11/12, 12/12 ...).

So what I'm trying to do is to filter out if the date has passed or not then display it and also for example if you visit the site on 01/08 the hole list will be displayed, because no Santa has arrived. But the 11/12, the first from the database will not show up because I have another section for Santas arriving tonight.

You can see the full component over here:

<template>
    <div class="container mx-auto max-w-5xl px-6 md:px-0 mb-16">
        <section class="mb-16">
            <div v-if="todaySantas < 1">
                <h2 class="text-5xl font-bold text-left">Það kemur enginn jólasveinn í kvöld</h2>
            </div>

            <div v-else>
                <div class="w-full" v-for="santa in todaySantas">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ santa.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="santa.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="santa.description"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="w-full flex justify-between">
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Næstu jólasveinar</p>
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Í dag er: <span v-text="today"></span></p>
            </div>


            <div class="shadow rounded-lg p-12">
                <div class="w-full" v-for="santa in leftSantas">
                    <div class="w-full flex">
                        <div class="w-32 h-32">
                            <img :src="santa.link_to_image" class="max-h-full mx-auto">
                        </div>
                        
                        <div class="flex-1 self-center px-4">
                            <h2 class="text-xl font-bold mb-2" v-text="santa.name"></h2>
                            <p class="text-sm" v-text="santa.description"></p>  
                        </div>
                    </div>

                    <hr class="border my-8">
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
    data() {
        return {
            today: dayjs().format('DD/MM'),

            santas: [],
        }
    },

    methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        }
    },

    computed: {
        todaySantas: function () {
            return _.filter(this.santas, ['date_on_arrival', this.today]); // VIRKAR
        },

        leftSantas: function () {
            return _.filter(this.santas, (v) => v.date_on_arrival.substring(3,5) <= this.today.substring(3,5));
        }
    },

    mounted() {
        this.getSantas();
    }
};
</script>
Activity icon

Replied to Make V-for Print Only One Object

Figured it out. I used lodash to filter it out

computed: {
        todaySantas: function () {
            return _.filter(this.santas, ['date_on_arrival', '17']);
        },

        leftSantas: function () {
            return _.filter(this.santas, (v) => v.date_on_arrival > 17);
        }
    },
Activity icon

Replied to Don't Allow Numbers Into Input

Yes, that did work :) Thank you

Activity icon

Replied to Don't Allow Numbers Into Input

Thanks, this solution helped me. So it ended up like this:

<input @keypress="checkCardOwnerSpelling">


checkCardOwnerSpelling: function (e) {
    var key = e.keyCode;

    if ((key == 48) || (key == 49) || (key == 50) || (key == 51) || (key == 52) || (key == 53) || (key == 54) || (key == 55) || (key == 56) || (key == 57)) {
        e.preventDefault();
    }
},
Activity icon

Started a new Conversation Don't Allow Numbers Into Input

Is there any way to make input ignore numbers? And just replace them with whitespace? I haven't figured it out with masking the input.

Activity icon

Replied to Vue JS Keyup On Any Key

Thanks, @keypress worked for me. I was trying to get notified when a number was pressed.

Activity icon

Started a new Conversation Vue JS Keyup On Any Key

Hi, I haven't found how to run a function after every key is pressed. Any idea?

<input @keyup="checkCardType"/>

Activity icon

Replied to Make V-for Print Only One Object

How can I make this computed prop filter through an array? @ftiersch @willvincent

Nov
24
2 weeks ago
Activity icon

Replied to Vue Not Rendering

Sorry, I have it in another file.

@extends ('layouts.master')

@section ('header')
    <santa></santa>
@endsection

This file is rentering. I can see it on the layout

Activity icon

Started a new Conversation Vue Not Rendering

I can't figure out why I'm not seeing anything on the screen. There is no error messages in the console or in the browser. If I look in the app.js file through the web browser I see some of the stuff I'm doing in my component but I do not see the component itself.


require('./bootstrap');

window.Vue = require('vue');

Vue.component('santa', require('./components/SantaComponent.vue').default);

const app = new Vue({
    el: '#app',
});
<template>
    <div class="container mx-auto max-w-5xl px-6 md:px-0 mb-16">
        <section id="todaySanta" class="my-16">
            <div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="w-full flex justify-between">
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Næstu jólasveinar</p>
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Í dag er: <span v-text="todayFormated"></span></p>
            </div>


            <div class="shadow rounded-lg p-12">
                <div class="w-full" v-for="(items, santa) in santas">
                    <div class="flex flex-col" v-if="isAfter(items.date_on_arrival)">
                        <div class="w-full flex">
                            <div class="w-32 h-32">
                                <img :src="items.link_to_image" class="max-h-full mx-auto">
                            </div>
                            
                            <div class="flex-1 self-center px-4">
                                <h2 class="text-xl font-bold mb-2" v-text="items.name"></h2>
                                <p class="text-sm" v-text="items.description"></p>  
                            </div>
                        </div>
                    </div>

                    <hr class="border my-8">
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
    data() {
        return {
            today: dayjs(),
            todayFormated: dayjs().format('DD/MM/YYYY'),
            // today: dayjs().subtract(5, 'days').add(2, 'months'),  USE THIS IF YOU NEED TO IF THE METHODS WORKS

            santas: [],
        }
    },

    methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        },

        isPassed(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isBefore(this.today);
        },

        isNext(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear).millisecond(1);

            return dayjs(tempDate).isSame(dayjs(this.today).millisecond(1));
        },

        isAfter(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isAfter(dayjs(this.today).add(1,'day'));
        }
    },

    mounted() {
        this.getSantas();
    }
};
</script>
<!DOCTYPE html>
<html lang="is">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Jólavefurinn</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @include ('partials.navbar')
    
    @yield ('header')

    <div id="app" class="py-24">
        <div class="container mx-auto max-w-6xl px-6 md:px-0 flex">
            <main class="w-4/6">
                @yield ('first-section')
            </main>
            <aside class="w-2/6 pl-10">
                <div class="w-full h-auto bg-gray-300">
                    hi
                </div>
            </aside>
        </div>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "dayjs": "^1.8.16",
        "lodash": "^4.17.15",
        "tailwindcss": "^1.1.2"
    }
}
Activity icon

Replied to Example Domain When Using Laravel Valet

address=/.test/127.0.0.1
listen-address=127.0.0.1
Activity icon

Replied to Example Domain When Using Laravel Valet

It worked in the end. I just deleted the projects who was not working and made new and it started to work.

Activity icon

Replied to Example Domain When Using Laravel Valet

Just did, still getting this example page

Activity icon

Replied to Example Domain When Using Laravel Valet

Some other .test sites are working. For example, those created few days ago. But if I try to do this laravel new project and then try to enter project.test, it wont work. Then I get this example page

Activity icon

Replied to Example Domain When Using Laravel Valet

So this is what I get:

64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.027 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.119 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.106 ms
64 bytes from 127.0.0.1: icmp_seq=3 ttl=64 time=0.109 ms
Nov
23
2 weeks ago
Activity icon

Replied to Example Domain When Using Laravel Valet

So this is what the portfolio.test is saying:

Example Domain

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

More information...

// And if I click more info I'm redirected over to iana.org (https://www.iana.org/domains/reserved)

Activity icon

Replied to Example Domain When Using Laravel Valet

So now when I try entering some website for example: portfolio.test, I get some website saying Example Domain. Its not my site, there is some other site overruling my Laravel Valet site.

Activity icon

Started a new Conversation Example Domain When Using Laravel Valet

Hi, today I start getting an example domain when I was trying to enter any of my projects. I'm using Laravel Valet but I always get the example domain site, doesn't matter if I use browserSync still get the same message. I have tried to clear my history but that didn't work, am I the only one or is this happing to other people. Thanks :)

Nov
21
3 weeks ago
Activity icon

Replied to Add A Space After Every 4 Characters

This doesn't work, because after the 4 space it adds space after every character

Nov
20
3 weeks ago
Activity icon

Replied to Add A Space After Every 4 Characters

This workes, but how will I make this overwrite the input? So when the user is typing in his card info this space will automatically appear.

Activity icon

Replied to Add A Space After Every 4 Characters

What do you mean?

Activity icon

Replied to Add A Space After Every 4 Characters

I'm just playing around, I'm not making an actual app

Activity icon

Started a new Conversation Add A Space After Every 4 Characters

Hi, I'm trying to find out how I can add space to user input after 4 characters. This is for a credit card field. I have been trying regex but when I try this:

console.log(cardNumber.replace(/^(.{4})(.{4})(.{4})(.*)$/, "   "));

It only workes if a but a number in but not when I try using my cardNumber variable.

Here is the full code:

<template>
    <input type="text" @keyup="cardNumberSpace" ref="creditCardNumber" :maxlength="max">        
</template>

<script>
export default {
    data() {
        return {
            max: 23,
        }
    },

    methods: {
        cardNumberSpace: function () {
            var cardNumber = this.$refs.creditCardNumber.value;

            // cardNumber.replace(/^(.{4})(.{6})(.*)$/, "  ");

            console.log(cardNumber.replace(/^(.{4})(.{4})(.{4})(.*)$/, "   "));
        }
    }
};
</script>

Oct
23
1 month ago
Activity icon

Replied to Make V-for Print Only One Object

I have this if statement:

<div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>
                        </div>
                    </div>
                </div>
            </div>

But this returns if something matches the date_on_arrival. And if a add an else statement underneath then I get 13 sorry messages. I haven't figure out how to make an if statement above the v-for loop.

Oct
21
1 month ago
Activity icon

Replied to Make V-for Print Only One Object

So what I'm trying to do is render Sorry nothing today if the dates doesn't match

Oct
20
1 month ago
Oct
17
1 month ago
Activity icon

Replied to Make V-for Print Only One Object

And these are the filters that return true or false

methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        },

        isPassed(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isBefore(this.today);
        },

        isNext(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear).millisecond(1);

            return dayjs(tempDate).isSame(dayjs(this.today).millisecond(1));
        },

        isAfter(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isAfter(dayjs(this.today).add(1,'day'));
        }
    },
Activity icon

Started a new Conversation Make V-for Print Only One Object

Hi, I have 13 things in an array. Then I have a for loop to go through that array and filter out if the date is the same as today then that returns true or false. But what I want to do is to print out a sorry message once, not 13 times. I'm not sure it's possible with for loop so if you have a better idea, please share :)

<div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>
                        </div>
                    </div>
                </div>

                <div v-else>
                    <h2 class="text-5xl font-bold text-center mb-8">Það kemur enginn jólasveinn í kvöld</h2>
                </div>
            </div>
Activity icon

Replied to DayJS Formation

Got it to work, was overwriting it incorrectly.

Activity icon

Replied to DayJS Formation

It returns the same date but different milliseconds so if I overwrite them it still doesn't work

Activity icon

Replied to DayJS Formation

This worked for isAfter, but if I want to use isSame it dosen't work.

I match and see if it's arriving today. There should be one true but this is returning 13 false.

today: dayjs().subtract(5, 'days').add(2, 'months'),


isNext(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            console.log(dayjs(tempDate).isSame(this.today));
        },
Activity icon

Replied to DayJS Formation

And this is the template

<section id="todaySanta" class="my-16">
            <div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <p class="uppercase text-xs text-gray-500 mb-2 select-none">Næstu jólasveinar</p>

            <div class="w-full" v-for="(items, santa) in santas">
                <div class="flex flex-col border shadow hover:shadow-md transition-md rounded-lg p-6 mb-4" v-if="isAfter(items.date_on_arrival)">
                    <div class="w-full flex">
                        <div class="w-32">
                            <img :src="items.link_to_image">
                        </div>
                        
                        <div class="flex-1 self-center px-4">
                            <h2 class="text-xl font-bold mb-2" v-text="items.name"></h2>
                            <p class="text-sm" v-text="items.description"></p>  
                        </div>
                    </div>
                </div>
            </div>
        </section>
Activity icon

Replied to DayJS Formation

So I have an array of items with a date_on_arrival, so what I'm trying to do is check if the date is after to come or passed. Did this explain it well enough?

So the date I'm pulling in is from the array and then today is just dayjs().format('DD/MM/YYYY)

Here is the full script (BTW, the date_on_arrival in the array is just a number, for example, 11, 12 or 13. Because DayJS was mixing the date and month so 11/12 would have been 12/11. And I need use this every year, that's why I'm adding the year)

<script>
import dayjs from 'dayjs';

export default {
    data() {
        return {
            today: dayjs().format('DD/MM/YYYY'),
            // today: dayjs().subtract(5, 'days').add(2, 'months').format('DD/MM'), // Giljagaur kemur þessum degi

            santas: [],
        }
    },

    methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        },

        isPassed(date) {
            let temp = dayjs(date);

            return temp.isBefore(this.today);
        },

        isNext(date) {
            let temp = dayjs(date);

            return temp.isSame(this.today);
        },

        isAfter(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            console.log(dayjs(tempDate, 'DD/MM/YYYY'));

            return dayjs(tempDate, 'DD/MM/YYYY').isAfter(this.today);
        }
    },

    mounted() {
        this.getSantas();
    }
};
</script>
Activity icon

Replied to DayJS Formation

This isn't formating the date

c {$L: "en", $d: Sat Dec 14 2019 18:31:55 GMT+0000 (Greenwich Mean Time), $y: 2019, $M: 11, $D: 14, …}

I tried this but then you need some Custome Parse Format, and I don't know how to import it.

Activity icon

Replied to DayJS Formation

No, got this now:

Error in render: "TypeError: dayjs__WEBPACK_IMPORTED_MODULE_0___default(...)(...).isAfter(...).format is not a function"
Activity icon

Started a new Conversation DayJS Formation

Hi, I'm trying to format my date into DD/MM/YYYY and run .isAfter method as well, but I always get this error message:

Error in render: "TypeError: dayjs__WEBPACK_IMPORTED_MODULE_0___default(...)(...).format(...).isAfter is not a function"

I can't figure out how to format the date and run this method without crashing. I have tried DayJS Custom Parse Format but could not get it to work.

Here is what I'm at right now:

isAfter(date) {
    let tempYear = dayjs().get('year');
    let tempDate = dayjs().date(date).month(11).year(tempYear);

    return dayjs(tempDate).format('DD/MM/YYYY').isAfter(this.today);
}
Activity icon

Replied to Use DayJS Go Through Array And Check If Today Matches Anything From The Array.

I made three methods to do this:

isPassed(date) {
    let temp = dayjs(date);

    return temp.isBefore(this.today);
},

isNext(date) {
    let temp = dayjs(date);

    return temp.isSame(this.today);
},

isAfter(date) {
    let temp = dayjs(date);

    return temp.isAfter(this.today);
}

And a for-loop and an if statement on my divs.

<div class="w-full" v-for="(items, santa) in santas">
                <div class="flex flex-col border shadow hover:shadow-md transition-md rounded-lg p-6 mb-4" v-if="isAfter(items.date_on_arrival)">
                    <div class="w-full flex">
                        <div class="w-32">
                            <img :src="items.link_to_image">
                        </div>
                        
                        <div class="flex-1 self-center px-4">
                            <h2 class="text-xl font-bold mb-2" v-text="items.name"></h2>
                            <p class="text-sm" v-text="items.description"></p>  
                        </div>
                    </div>
                </div>
            </div>

If you have a better soultion please share :)

Activity icon

Started a new Conversation Use DayJS Go Through Array And Check If Today Matches Anything From The Array.

Hi, I'm trying to use VueJS and DayJS to see something from my database that has the same date_on_arrival as today. So for example, if something in the database a date_on_arrival 11/12 and today is 11/12, I want to display that in my section

I'm been trying to use lodash to group the arrival dates and then use DayJS to check isSame>/code>, but haven't figured it out.

See what I have done:

data() {
        return {
            today: dayjs().format('DD/MM'),
            santas: [],
        }
    },

    methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        },

        filter(items, prop) {
            return _.filter(items, prop);
        }
    },

    computed: {
        groupedByDateOnArrival() {
            return _.groupBy(this.santas, item => item.date_on_arrival);
        },

        comingTonight() {
            return dayjs(groupedByDateOnArrival).isSame(dayjs(), 'day');
        }
    },

    mounted() {
        this.getSantas();
    }

And this is what getSantas() returns

[
{
"id": 2,
"name": "Giljagaur",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n\t\t\t\t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n\t\t\t\t\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"link_to_image": "/images/jolasveinar/stekkjastaur.jpg",
"date_on_arrival": "12/12",
"created_at": "2019-10-17 14:08:58",
"updated_at": "2019-10-17 14:08:58"
},
{
"id": 1,
"name": "Stekkjastaur",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n\t\t\t\t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n\t\t\t\t\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"link_to_image": "/images/jolasveinar/stekkjastaur.jpg",
"date_on_arrival": "11/12",
"created_at": "2019-10-16 22:08:21",
"updated_at": "2019-10-16 22:08:21"
}
]