Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

hjortur17's avatar

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);
}
0 likes
11 replies
hjortur17's avatar

No, got this now:

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

According to the documentation it's

dayjs(tempDate, 'DD/MM/YYYY').isAfter(this.today);
hjortur17's avatar

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.

Sinnbeck's avatar

One is a true false (isAfter) and the other is formatting a date. Can you explain what your code should do?

hjortur17's avatar

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>
hjortur17's avatar

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>
Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

So why do you need format all? It is just an if test

dayjs(tempDate).isAfter(this.today);
hjortur17's avatar

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));
        },
hjortur17's avatar

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

hjortur17's avatar

Got it to work, was overwriting it incorrectly.

Please or to participate in this conversation.