Pemasangan vuejs-datepicker di Framework Nuxt.js

Permasalahan

Hallo Kawan, terkadang saat membuat aplikasi yang mengharuskan input data yang berkaitan dengan waktu, user atau pengguna aplikasi sering tidak melakukan input yang sesuai dengan format yang sudah di tetapkan di aplikasi, misalnya di format input kita meminta user harus input yyyy/mm/dd yang sering terjadi user input dengan format yang salah seperti yyyy/dd/mm hal ini tentu menimbulkan masalah dalam informasi dan pengolahan data.

Pemecahan Masalah

Di butuhkan sebuah library untuk membudahkan user untuk melakukan input date dengan format yang sudah di tetapkan. Karena pada kasus kali ini kita menggunakan Nuxt.js sebuah framework javascript jadi saya menggunakan library vuejs-datepicker.

Tahap Instalasi

Melakukan instalasi dengan npm,

npm i vuejs-datepicker

tunggu hingga proses download dan instalasi selesai. Kemudian buat sebuah file dan beri nama "vue-datepicker.js" di dalam folder "plugins" dan copy paste script di bawah ini.

import Vue from 'vue' 
import Datepicker from 'vuejs-datepicker' 
Vue.component('date-picker', Datepicker)

Kemudian tambahkan baris code di bawah ini untuk mengaktifkan/meRegistering componen/library secara global dengan mengEdit file "nuxt.config.js"

plugins: [ 
     ... plugins yang lain 
     { src: '~/plugins/vue-datepicker', ssr: false }, // datepicker plugin di sini 
],

Tahap Penerapan

Sekarang untuk menggunakan vuejs-datepicker bisa di gunakan dari pages atau compponents, hanya dengan menuliskan code di bawah ini kamu bisa menampilkan datepicker di mana kamu inginkan.

example code

<client-only>
   <date-picker placeholder="MM/DD/YYYY" format="MM/dd/yyyy" v-model="date_today" />
</client-only>

dan tambahkan baris code ini di dalam vue data() kamu,

data(){ 
  return{ 
    ... your other data variables ... 
    date_today:new Date() 
  } 
}

Jika dalam project nuxt yang kamu gunakan menggunakan versi Nuxt <2.9.0, bisa menggunakan <no-ssr> dari pada menggunakan <client-only>.

Saya sangat berharap tulisan ini bisa membantu anda. Terimakasih