Vuetify Tutorial #25 - Datepickers

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[PlantyJess]

Here's the updated version:

<v-menu max-width="290">
<template v-slot:activator="{ on }">
<v-text-field :value="formattedDate" label="Due date" v-on="on"></v-text-field>
</template>
<v-date-picker
</v-menu>

differences:
- the v-menu has a max-width of 290 so the drop shadow of the calendar popup lines up
- the v-text-field is wrapped in a template that handles the activator

[marcokucznierz]

Had a struggle with date-fns 2.0.1
the Format Function does not accept a string.

you need the parseISO function

import format from 'date-fns/format'

import parseISO from 'date-fns/parseISO'




export default {
name: 'Popup',
data() {
return {
title: '',
content: '',
due: null
}
},
methods: {
submit()
{
console.log(this.title, this.content)
}
},
computed: {
formattedDate(){
return this.due ? format(parseISO(this.due), 'do MMM yyyy') : ''
},

}

}

[danijeldzankic]

I have used Moment.js to avoid issues with the date parsing. It worked out fine.
first:
npm install moment


then:
import moment from 'moment'


and last:
computed: {
formattedDate() {
return this.due ? moment(this.due).format("Do MMMM YYYY") : "";
}
}

[carltonmcfarlane_]

Thanks for another great tutorial!

If anyone is struggling to get the icons to show now, I managed by changing to Not sure if something has changed or I was just doing something wrong. 🤷🏽‍♂️

[ptDUq]

It's been fun going along so far, please keep it up!

[Frank-Lee-Speeking]

I would dearly love to see a new version of this same course, updated for Vuetify 3 (and Vue 3 Composition AI)!

[KundoKun]

thank you very much Net Ninja! you're really good teaching, I learn a lot!

[karlaalejandra]

Solution for datepicker not appearing:

<v-menu>
<template v-slot:activator="{ on }">
<v-text-field :value="formattedDate" v-on="on" label="Due date"
</template>
<v-date-picker
</v-menu>

[Cho]

The "date-fns" is also useful. Thanks!!!

[jishnuraj]

Hey Net Ninja, I need a little help out here.

I'm going to make a kind of web app where visitors can create a user account (for free) and post some kind of message/data like Facebook's new field.

I've yet completed ReactJS course of Net Ninja from the beginning to the Redux part(not yet started Redux).

I've made a NodeJS REST API.

And I have a thought of using material-ui for styling it. So, which one would you prefer me for this kind of web app ?

ReactJS+Material-ui or Vue.js+Vuetify ?

[michongoma]

Thank you! can't wait to see form validation!

[milacvetkovic]

Thank you very much for these tutorials, they are GREAT! Keep it up <3

[EmmaEG]

Here's the updated version, I'm using a custom textield but you can use the v-text-field.

<div style="width: 166px">
<CustomTextField
label="Fecha Nac."

= !showDatePicker"

v-model="selectedDate"
/>
<VDatePicker
v-if="showDatePicker"
v-model="selectedDate"
@click:save="(showDatePicker = !showDatePicker), selectedDate"
/>
</div>

<script setup lang="ts">
const selectedDate = Vue.ref();
const showDatePicker = Vue.ref<boolean>(false);

const selectedDateFormatted = Vue.computed(() => {
return selectedDate.value
? new
: "";
});
</script>

[testok]

Fantastic ! Thank you sir - Subscribed !
Just one question - if I want to change more than 1 part of the date, the 'menu' closes after the first selection which is annoying. How to keep it active till I click an "ok" on the calendar ?

[MaurizioCalarese]

Great serie! Do you plan to make one on “Material-UI”, for react?
Would be awesome.

[Sollyer]

hey ninja, i want to know if u could do something like that but using vue and materialize, can u?

[soundsrever]

@The Net Ninja can you please help me... how can display events on calendar from firebase firestore?

[neenus]

Hi there ... thanks for the great video; just a quick question about installing date-fns why did you not pass --save flat when it was installed isn't date-fns a dependency??

[rarestaiden]

thank u, you have helped me alot with my code and other stuff

[juleshwa]

Without installing another library:


formattedDate() {
return this.due ? new Date(this.due).toUTCString().substring(0, 16) : '' '
}