61 lines
2.5 KiB
Vue
61 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
|
|
|
const dateValue = ref([])
|
|
const formatter = ref({
|
|
date: 'DD MMM YYYY',
|
|
month: 'MMM'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
|
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
|
|
|
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
|
<select
|
|
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
|
<option value="">Semua Unit Induk Distribusi/Wilayah</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
|
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
|
|
|
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
|
<select
|
|
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
|
<option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
|
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
|
|
|
|
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
|
<select
|
|
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
|
<option value="">Semua Unit Layanan Pelanggan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
|
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
|
|
|
<div class="flex-1 relative w-full rounded-lg bg-gray-200">
|
|
<vue-tailwind-datepicker
|
|
input-classes="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
|
v-model="dateValue"
|
|
:formatter="formatter"
|
|
separator=" s/d "
|
|
:shortcuts="false"
|
|
:auto-apply="false"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</template> |