2253499600
Refactor RGangguan_BerdasarMedia.vue to fix css-class typo Refactor RKeluhan_BerdasarMedia.vue to update display-format and css-class Refactor RGangguan_KTI.vue to remove 'Semua Unit' and 'Regional' from groupList Refactor RGangguan_CTTM.vue to remove 'Semua Unit' and 'Regional' from groupList Refactor Type11.vue to update placeholder and values in InputWithSuffix Refactor RKeluhan_PerUnit.vue to update calculateCustomSummary function
113 lines
3.3 KiB
Vue
Executable File
113 lines
3.3 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { PhCalendarBlank } from '@phosphor-icons/vue'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
|
|
|
const dateValue = ref(
|
|
`${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
|
|
)
|
|
const formatter = ref({
|
|
date: 'DD-MM-YYYY',
|
|
month: 'MMMM'
|
|
})
|
|
const emit = defineEmits(['update:dateValue'])
|
|
|
|
const customShortcuts = () => {
|
|
return [
|
|
{
|
|
label: 'Hari Ini',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setHours(0, 0, 0, 0)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: 'Kemarin',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setDate(date.getDate() - 1)), new Date(date.setHours(0, 0, 0, 0))]
|
|
}
|
|
},
|
|
{
|
|
label: '7 Hari Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setDate(date.getDate() - 7)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: '15 Hari Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setDate(date.getDate() - 15)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: '30 Hari Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setDate(date.getDate() - 30)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: '3 Bulan Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setMonth(date.getMonth() - 3)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: '6 Bulan Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setMonth(date.getMonth() - 6)), new Date()]
|
|
}
|
|
},
|
|
{
|
|
label: '1 Tahun Terakhir',
|
|
atClick: () => {
|
|
const date = new Date()
|
|
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
watch(dateValue, (newValue) => {
|
|
emit('update:dateValue', newValue)
|
|
})
|
|
|
|
onMounted(() => {
|
|
emit('update:dateValue', dateValue.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex">
|
|
<vue-tailwind-datepicker
|
|
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-1">
|
|
<button
|
|
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">
|
|
{{ value || placeholder }}
|
|
</span>
|
|
<PhCalendarBlank size="18" weight="regular" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</vue-tailwind-datepicker>
|
|
</div>
|
|
</template>
|