defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor DatePicker.vue component

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-04-02 04:23:26 +07:00
parent bf2425a5f1
commit 0da20c2e95
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/DatePicker.vue
View File

@ -3,7 +3,9 @@ import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker' import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('') const dateValue = ref(
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
)
const formatter = ref({ const formatter = ref({
date: 'DD-MM-YYYY', date: 'DD-MM-YYYY',
month: 'MMMM' month: 'MMMM'
@ -36,12 +38,22 @@ watch(dateValue, (newValue) => {
<template> <template>
<div class="flex"> <div class="flex">
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts" <vue-tailwind-datepicker
:auto-apply="true" as-single use-range v-slot="{ value, placeholder }"> v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="customShortcuts"
:auto-apply="true"
as-single
use-range
v-slot="{ value, placeholder }"
>
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<button type="button" <button
class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"> type="button"
class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
>
<span class="text-gray-900"> <span class="text-gray-900">
{{ value || placeholder }} {{ value || placeholder }}
</span> </span>