fix: updated Date/Datetime/DateRange Picker component

This commit is contained in:
Shariq Ansari 2024-06-08 19:59:32 +05:30
parent 3c0232f9da
commit 74e54c1cd2
3 changed files with 23 additions and 13 deletions

View File

@ -4,16 +4,14 @@
class="flex w-full [&>div:first-child]:w-full"
>
<template #target="{ togglePopover }">
<input
<Input
readonly
type="text"
:placeholder="placeholder"
:value="value && formatter ? formatter(value) : value"
@focus="!readonly ? togglePopover() : null"
:class="[
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500',
inputClass,
]"
class="w-full"
:class="inputClass"
v-bind="$attrs"
/>
</template>
@ -23,7 +21,11 @@
>
<div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
<FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button>
<div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }}

View File

@ -4,16 +4,15 @@
class="flex w-full [&>div:first-child]:w-full"
>
<template #target="{ togglePopover }">
<input
<Input
readonly
type="text"
:placeholder="placeholder"
:value="formatter ? formatDates(value) : value"
@focus="!readonly ? togglePopover() : null"
:class="[
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500 ',
inputClass,
]"
class="w-full"
:class="inputClass"
v-bind="$attrs"
/>
</template>
<template #body="{ togglePopover }">
@ -22,7 +21,11 @@
>
<div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
<FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button>
<div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }}

View File

@ -10,6 +10,7 @@
:placeholder="placeholder"
:value="value && formatter ? formatter(value) : value"
@focus="!readonly ? togglePopover() : null"
class="w-full"
:class="inputClass"
v-bind="$attrs"
/>
@ -20,7 +21,11 @@
>
<div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
<FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button>
<div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }}