Question:

How to get the date and time and display it in a defineProps in Vuejs?

You must generate your date in the parent component—in this case, App.vue—if you wish to pass dates as props. The defineProps function merely as an interface for organizing our props and specifying their types, default values, and necessity. Both String and Date are valid prop types that I have defined in Header.vue, depending on how you want to pass your date props.

Here is how you can do it:

App.vue

<script setup>

import { ref } from 'vue'

import Header from './Header.vue';

const todaysDate = ref(new Date().toLocaleString());

</script>

<template>

<Header :date="todaysDate"></Header>

<Header :date="new Date('December 17, 1995 03:24:00')"></Header>

</template>

Header.vue

<script setup>

const props = defineProps({

date: [String, Date],

})

</script>

<template>

<h2>{{ date }}</h2>

</template>

Suggested blogs:

>How to manipulate manipulating Array object in JavaScript?

>How to do light and dark mode in a website using HTML and JavaScript?

>How to fix mouseover event glitch in JavaScript?

>How to use querySelectorAll()" with multiple conditions in JavaScript?

>Making a two-column grid overflow into the left column in Javascript

>How can I specify a monkey-patched class in the typescript definitions file in JavaScript?

>How to merge an object into Array of an objects with the same key in JavaScript?

>How to make one JavaScript event wait for another to trigger?

>How to manipulate Array object in JavaScript?

>How to do light and dark mode in a website using HTML and JavaScript?

>How to fix mouseover event glitch in JavaScript?

vuejs

Ritu Singh

Ritu Singh

Your Answer

Submit

0 Answers

vuejs

What is meant by progressive framework?

vuejs

How to solve the VueJS API error in production mode (npm run build)?

vuejs

Why does my Vue.js compile render function not work?

vuejs

Why VueJS / Vuetify error rendering a vTable component?

vuejs

Solve npm ERR ‘when I typed npm command "vue create vue-login-sign-ui"